Features
Simple list example
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
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
new Sortable(example3Left, {
group: {
name: 'shared',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150
});
new Sortable(example3Right, {
group: {
name: 'shared',
pull: 'clone'
},
animation: 150
});
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
new Sortable(example4Left, {
group: {
name: 'shared',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
sort: false // To disable sorting: set sort to false
});
new Sortable(example4Right, {
group: 'shared',
animation: 150
});
Handle
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
new Sortable(example5, {
handle: '.handle', // handle's class
animation: 150
});
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
new Sortable(example6, {
filter: '.filtered', // 'filtered' class is not draggable
animation: 150
});
Thresholds
Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.
1
2
new Sortable(example7, {
swapThreshold: 1,
animation: 150
});
Examples
Grid Example
START
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
END