🔬
Selectable
  • Selectable
  • Getting Started
    • Install
    • Set Up
    • States
    • Items
    • Demos
      • Checkboxes
      • Dropzone Integration
      • Sortable Integration
  • API
    • Options
      • appendTo (deprecated)
      • autoRefresh
      • autoScroll
      • classes
      • container
      • filter
      • handle
      • ignore
      • lasso
      • lassoSelect
      • maxSelectable
      • saveState
      • throttle
      • toggle
      • tolerance
      • touch
    • Properties
    • Methods
      • add()
      • attachEvents()
      • clear()
      • deselect()
      • destroy()
      • detachEvents()
      • disable()
      • enable()
      • getItems()
      • getNodes()
      • getSelectedItems()
      • getUnSelectedItems()
      • getSelectedNodes()
      • getUnSelectedNodes()
      • getFirstSelectedItem()
      • getFirstSelectedNode()
      • init()
      • invert()
      • off()
      • on()
      • once()
      • redo()
      • refresh()
      • remove()
      • select()
      • selectAll()
      • setContainer()
      • state()
      • toggle()
      • undo()
      • update()
    • Events
      • init
      • destroyed
      • start
      • drag
      • end
      • select
      • deselect
      • selecting
      • deselecting
      • add
      • remove
      • update
      • state
      • enabled
      • disabled
Powered by GitBook
On this page
  1. Getting Started
  2. Demos

Sortable Integration

PreviousDropzone IntegrationNextOptions

Last updated 1 year ago

const items = document.getElementById('items');

const SELECTABLE = new Selectable({
    filter: ".item",
    appendTo: items,
    ignore: ".handle" // ignore the handle used for sorting
});

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