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();
    }
});