Just add the data attribute data-toggle="dragula"
to have drag and drop support in your container.
{% set leftCards = [{
avatar: "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg",
name: "Jenell D. Matney",
title: "Founder and CEO"
}, {
avatar: "assets/images/256_daniel-gaffey-1060698-unsplash.jpg",
name: "Sherri J. Cardenas",
title: "Software Engineer"
}, {
avatar: "assets/images/256_jeremy-banks-798787-unsplash.jpg",
name: "Joseph S. Ferland",
title: "Web Designer"
}] %}
{% set rightCards = [{
avatar: "assets/images/256_joao-silas-636453-unsplash.jpg",
name: "Bryan K. Davis",
title: "Web Developer"
}, {
avatar: "assets/images/256_luke-porter-261779-unsplash.jpg",
name: "Elizabeth J. Ohara",
title: "Business Analyst"
}, {
avatar: "assets/images/256_michael-dam-258165-unsplash.jpg",
name: "Kaci M. Langston",
title: "Human Resources"
}] %}
Containers
Add the data attribute data-dragula-containers='["#cards-left", "#cards-right"]'
to allow the user to drag an element in any of the containers and drop it in any other container in the list.
{% import "components/user-feedback.html" as feedback %}
Container #1
{% for card in leftCards %}
{{ feedback.component(avatar=card.avatar, name=card.name, title=card.title) }}
{% endfor %}
Container #2
{% for card in rightCards %}
{{ feedback.component(avatar=card.avatar, name=card.name, title=card.title) }}
{% endfor %}
Handles
Add the data attribute data-dragula-moves="js-dragula-handle"
to allow the user to drag an element in any of the containers and drop it in any other container in the list using a handle.
{% import "components/user-handle.html" as user %}
Container #1
{% for card in leftCards %}
{{ user.component(avatar=card.avatar, name=card.name, title=card.title) }}
{% endfor %}
Container #2
{% for card in rightCards %}
{{ user.component(avatar=card.avatar, name=card.name, title=card.title) }}
{% endfor %}