Author: | lukasoppermann |
---|---|
Views Total: | 6,506 views |
Official Page: | Go to website |
Last Update: | September 23, 2018 |
License: | MIT |
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