For UI Kit users that want to use drag and drop functionality, the UI Kit team recommends the @dnd-kit library for its performance, accessibility and extensibility. We strongly recommend checking their documentation.
Simple sortable list
This sample showcases a scenario where we have a single column and we want to drag items within this column. You can drag the items
by their handle or by using the keyboard. In this case you just have to tab your way to the item and press the Space key (or Enter)
to select it and then use the arrows to move the item to its new place Then just press Space again to release it.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
Multiple Containers
In this sample we showcase how to use drag and drop between different containers. Note that you can reorder the columns by dragging each column by its header.
To Do
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
Done
- Item 10
- Item 11
- Item 12
- Item 13
- Item 14
Native Drag and Drop
If you don’t want to use any external libraries you can still achieve a similar result by using plain Javascript.
To Do
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
Complex example
This example showcases a more complex use case of drag and drop, where we have a kanban board with multiple columns and cards. You can drag the cards between columns and reorder them within the same column. You can also reorder the columns by dragging them. You can
To Do
Task 1
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 2
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
In Progress
Task 3
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 4
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
In Review
Task 5
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 6
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 7
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Reviewed
Task 8
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 9
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.
Task 9
Some time ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.