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
Relatively Positioned Draggable
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