Drag and drop

Available Sass Variables and default values

Examples

Basic Setup

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

$(".draggable").draggable()

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.

Dropzone

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

$(".droppable").droppable()

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

Draggable 1
Draggable 2
Droppable Area

Event Log:

Sortable Grid