Lightweigt HTML5 Drag And Drop Sortable Library – html5sortable

Preview:

Description:

html5sortable is a lightweight and standalone JavaScript library for re-sorting a group of list and/or grid items using native HTML5 drag and drop API.  Supports exclude, nested, connected lists and even table rows.

Install it via NPM:

# NPM
$ npm install html5sortable

Basic usage:

Import the html5sortable into your project and create a new sortable list as this:

sortable('.sortable');

Pass the following option object as the second parameter to the sortable method:

sortable('.sortable',{
  // child elements
  items: ':not(.disabled)',
  // restrict drag start
  handle: 'h2',
  // forces the placeholder size
  forcePlaceholderSize: true,
  // CSS selector for connected lists
  connectWith: 'connected',
  // custom placeholder
  placeholder: '',
  // CSS class when hovered
  hoverClass: 'is-hovered'
});

API methods.

// destroy
sortable('.sortable', 'destroy');
// disable the sortable temporarily:
sortable('.sortable', 'disable');
// enable or disabled sortable:
sortable('.sortable', 'enable');

Events.

sortable('.sortable')[0].addEventListener('sortstart', function(e) {
  /*
  This event is triggered when the user starts sorting and the DOM position has not yet changed.
  e.detail.item contains the current dragged element
  e.detail.placeholder contains the placeholder element
  e.detail.startparent contains the element that the dragged item comes from
  */
});
sortable('.sortable')[0].addEventListener('sortstop', function(e) {
  /*
  This event is triggered when the user stops sorting. The DOM position may have changed.
  e.detail.item contains the element that was dragged.
  e.detail.startparent contains the element that the dragged item came from.
  */
});
sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
  /*
  This event is triggered when the user stopped sorting and the DOM position has changed.
  e.detail.item contains the current dragged element.
  e.detail.index contains the new index of the dragged element (considering only list items)
  e.detail.oldindex contains the old index of the dragged element (considering only list items)
  e.detail.elementIndex contains the new index of the dragged element (considering all items within sortable)
  e.detail.oldElementIndex contains the old index of the dragged element (considering all items within sortable)
  e.detail.startparent contains the element that the dragged item comes from
  e.detail.endparent contains the element that the dragged item was added to (new parent)
  */
});

Changelog:

v0.9.4 (09/23/2018)

• Update