Selectable & SortableJS
Drag the items with the handle to rearrange.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
const items = document.getElementById('items');
const SELECTABLE = new Selectable({
filter: ".item",
appendTo: items,
ignore: ".handle" // ignore the handle used for sorting
});
/* https://github.com/SortableJS/Sortable */
const SORTABLE = Sortable.create(items, {
animation: 200,
handle: ".handle",
onUpdate: function (evt) {
// Selecting will still work, but shift + select will be broken due to the order difference.
// So update the Selctable instance to reflect the new order.
SELECTABLE.update();
}
});