Nestable
Simple list example
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div id="example1" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>
Shared lists
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example2-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>
<div id="example2-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 6</div>
</div>
</div>
Cloning
Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example3-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>
<div id="example3-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 6</div>
</div>
</div>
Disabling Sorting
Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="grid md:grid-cols-2 gap-5">
<div id="example4-left" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>
<div id="example4-right" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 tinted">Item 6</div>
</div>
</div>
Handle With Icon
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div id="example5" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700"><i class="mgc_move_line handle"></i> Item 6</div>
</div>
Filter
Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.
Item 1
Item 2
Item 3
Filtered
Item 4
Item 5
<div id="example6" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="rounded-md border px-6 py-3 bg-danger filtered border-gray-200 dark:border-gray-700">Filtered</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
</div>
Grid Example
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
<div id="gridDemo" class="flex flex-wrap gap-4">
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 1</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 2</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 3</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 4</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 5</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 6</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 7</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 8</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 9</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 10</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 11</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 12</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 13</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 14</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 15</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 16</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 17</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 18</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 19</div>
<div class="w-24 h-24 flex items-center justify-center text-slate-900 dark:text-slate-200 rounded border shadow border-gray-200 dark:border-gray-700">Item 20</div>
</div>
Nested Sortables Example
NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.
It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).
Item 1.1
Item 2.1
Item 2.2
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Item 2.3
Item 2.4
Item 1.2
Item 1.3
Item 1.4
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Item 1.5
<div id="nestedDemo" class="flex flex-col gap-3 nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">Item 1.1
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.2
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">Item 3.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">Item 3.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">Item 3.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-3">Item 3.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">Item 1.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">Item 1.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">Item 1.4
<div class="list-group nested-sortable">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-2">Item 2.4</div>
</div>
</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700 nested-1">Item 1.5</div>
</div>
MultiDrag
The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div id="multiDragDemo" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>
Swap
The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div id="swapDemo" class="flex flex-col gap-3">
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 1</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 2</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 3</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 4</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 5</div>
<div class="card cursor-grab px-6 py-3 border border-gray-200 dark:border-gray-700">Item 6</div>
</div>