Dragula
Simple Drag and Drop Example
Just specify the data attribute data-plugin='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.
Move stuff between containers
Just specify the data attribute
data-plugin='dragula'
and
data-containers='["first-container-id", "second-container-id"]'
.
Part 1

Louis K. Bond
Founder & CEO
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Dennis N. Cloutier
Software Engineer
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.

Susan J. Sander
Web Designer
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.
Part 2

James M. Short
Web Developer
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh

Gabriel J. Snyder
Business Analyst
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh

Louie C. Mason
Human Resources
"Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh
Move stuff between containers using handle
Just specify the data attribute
data-plugin='dragula'
,
data-containers='["first-container-id", "second-container-id"]'
and
data-handle-class='dragula-handle'
.
Part 1

Louis K. Bond
Founder & CEO

Dennis N. Cloutier
Software Engineer

Susan J. Sander
Web Designer
Part 2

James M. Short
Web Developer

Gabriel J. Snyder
Business Analyst

Louie C. Mason
Human Resources