Drag and drop

Available Sass Variables and default values


Basic Setup

For the most basic drag and drop functionality, initialize any element as a draggable object:


Draggable Example

Draggable Item

Drag Placeholder

By default, when a drag event is started a placeholder is created. If you wish to hide it, just style it away.


Draggable items aren't that useful without dropzones. Initialize an element as a droppable area with:


Droppable areas get a class added (.dropping) when a droppable item hovers over them.

Draggable 1
Draggable 2
Droppable Area

Event Log:

Sortable Grid