Examples for drag-drop
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 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 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 custom placeholder
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
Episode IX - The Rise of Skywalker
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
Episode IX – The Rise of Skywalker
Delayed dragging
Dragging starts after one second
Drag&Drop disabled sorting

Available items

Carrots
Tomatoes
Onions
Apples
Avocados

Shopping basket

Oranges
Bananas
Cucumbers
Drag&Drop disabled
I can be dragged
I cannot be dragged
I can also be dragged
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 horizontal wrapping list
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Basic Drag&Drop
Drag me around
Drag&Drop with alternate root element
Drag&Drop sort predicate
1
2
3
4
5
6
7
8
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
Episode IX – The Rise of Skywalker
Drag&Drop table
No. Name Weight Symbol Quantity of Element 1 Hydrogen 1.0079 H 1002 Helium 4.0026 He 1003 Lithium 6.941 Li 1004 Beryllium 9.0122 Be 1005 Boron 10.811 B 1006 Carbon 12.0107 C 1007 Nitrogen 14.0067 N 1008 Oxygen 15.9994 O 1009 Fluorine 18.9984 F 10010 Neon 20.1797 Ne 100
Drag&Drop tabs

Content for One

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo labore sapiente cum alias nobis!
Azure & Blue theme selected.