Drag and Drop

Examples for drag-drop
Basic Drag&Drop
Drag me around
Drag&Drop position locking
I can only be dragged up/down
I can only be dragged left/right
Drag&Drop boundary
I can only be dragged within the dotted container
Drag&Drop connected sorting

To do

Get to work
Pick up groceries
Go home
Fall asleep

Done

Get up
Brush teeth
Take a shower
Check e-mail
Walk dog
Drag&Drop connected sorting group

To do

Get to work
Pick up groceries
Go home
Fall asleep

Done

Get up
Brush teeth
Take a shower
Check e-mail
Walk dog
Drag&Drop custom placeholer
Episode I - The Phantom Menace
Episode II - Attack of the Clones
Episode III - Revenge of the Sith
Episode IV - A New Hope
Episode V - The Empire Strikes Back
Episode VI - Return of the Jedi
Episode VII - The Force Awakens
Episode VIII - The Last Jedi
Drag&Drop custom preview
Episode I - The Phantom Menace
Episode II - Attack of the Clones
Episode III - Revenge of the Sith
Episode IV - A New Hope
Episode V - The Empire Strikes Back
Episode VI - Return of the Jedi
Episode VII - The Force Awakens
Episode VIII - The Last Jedi
Delayed dragging
Dragging starts after one second
Drag&Drop disabled
I can be dragged
I cannot be dragged
I can also be dragged
Drag&Drop disabled sorting

Available items

Carrots
Tomatoes
Onions
Apples
Avocados

Shopping basket

Oranges
Bananas
Cucumbers
Drag&Drop enter predicate

Available numbers

1
2
3
4
5
6
7
8
9

Even numbers

10
Programmatically setting the free drag position

Drag me around
Drag&Drop with a handle
I can only be dragged using the handle
Drag&Drop horizontal sorting
Bronze age
Iron age
Middle ages
Early modern period
Long nineteenth century
Drag&Drop with alternate root element
Drag&Drop sorting
Episode I - The Phantom Menace
Episode II - Attack of the Clones
Episode III - Revenge of the Sith
Episode IV - A New Hope
Episode V - The Empire Strikes Back
Episode VI - Return of the Jedi
Episode VII - The Force Awakens
Episode VIII - The Last Jedi