Drag & Drop

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.

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.

Container #1
Avatar

Jenell D. Matney
Founder and CEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Avatar

Sherri J. Cardenas
Software Engineer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Avatar

Joseph S. Ferland
Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Container #2
Avatar

Bryan K. Davis
Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Avatar

Elizabeth J. Ohara
Business Analyst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Avatar

Kaci M. Langston
Human Resources

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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.

Container #1
Avatar
Jenell D. Matney
Founder and CEO
drag_handle
Avatar
Sherri J. Cardenas
Software Engineer
drag_handle
Avatar
Joseph S. Ferland
Web Designer
drag_handle
Container #2
Avatar
Bryan K. Davis
Web Developer
drag_handle
Avatar
Elizabeth J. Ohara
Business Analyst
drag_handle
Avatar
Kaci M. Langston
Human Resources
drag_handle