{{ title }}

Custom Dragula.js integration.

Simple Drag and Drop

Just add the data attribute data-toggle="dragula" to have drag and drop support in your container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
{% 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 %}