DND Demo

Simple Draggables

drag me around
drag me too!
or me!

Revertible Draggables

I move back
I do it faster!
I do it instantly!

Cloned Draggables

I leave clone
So do I
Me too!

Snapping Draggables

I snap to 50px
I snap to [50, 0]
I snap to [0, 50]

Axis Draggables

I move around
I move only X
I move only Y

Ranged Draggables

Ranged by simple positions

I move 100px
I move 200px
I move [200, 100]

Range defined by another element

I move only here

Seems like me too

Relatively Positioned Draggable

Move me around

 

Simple Droppable

Drag me
Drop here
or here

Overlapping Droppables

Those droppables will react only when overlapped with draggable (50% by default)

Drag me
X Only Overlap
Y Only Overlap

Both Overlap
Overlap Y 30%
Overlap X 70%

Selective Droppables

Selective by a css-rule

Drag me
Reds Only
Blues Only

Drag me
Reds Only
Blues Only

Selective by an elements list

First
First Only
Second Only

Second
First Only
Second Only