Sortable is a JavaScript library for reorderable drag-and-drop menus and a library that makes the list of items sortable/reorderable using the native Html5 API for drag and drop. Works with all modern browsers and touch devices.
javascript drag and drop list, dragula js, sortable js, responsive drag and drop, drag and drop list vanilla js, sortable js examples
How to make use of it:
Installation:
# NPM $ npm install sortablejs --save
1. Import the SortableJS.
import Sortable from 'sortablejs'; // or <script src="Sortable.min.js"></script>
2. Create a listing of draggable objects on the web page.
<ul id="example"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul>
3. Enable the Draggable & Sortable performance on the listing.
new Sortable(document.getElementById('example'), { // options here });
4. All attainable choices with default values.
new Sortable(el, { // name: String — group name // pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true. // put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added. // revertClone: boolean — revert cloned element to initial position after moving to a another list. group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] } // enable sorting sort: true, // time to wait before the sorting should start delay: 0 // enable delay on touch delayOnTouchOnly: false, // how many pixels the point should move before cancelling a delayed drag event touchStartThreshold: 0, // disables the sortable if set to true. disabled: false, // which items inside the element should be draggable draggable: '>*' // save and restore the sort. store: null, // animation speed animation: 0, // easing function: "cubic-bezier(1, 0, 0, 1)" easing: null, // drag handle handle: ".my-handle", // elements to ignore ignore: 'a, img', // filter selector filter: ".ignore-elements", // preverntDefault when filtering preventOnFilter: true, // drop placeholder ghostClass: "sortable-ghost", // chosen class chosenClass: "sortable-chosen", // dragging class dragClass: "sortable-drag", // default data attribute dataIdAttr: 'data-id', // enable drop bubble dropBubble: false, // threshold of the swap zone swapThreshold: 1, // invert swap invertSwap: false, // threshold of the inverted swap zone invertedSwapThreshold: 1, // will be detected automatically if not given direction: 'horizontal', // ignore the HTML5 DnD behaviour forceFallback: false, // fallback class fallbackClass: "sortable-fallback", // appends the cloned DOM Element into the document body fallbackOnBody: false, // how far the mouse should move before it's considered as a drag. fallbackTolerance: 0, // fallback offsets fallbackOffset: { x: 0, y: 0 }, dragoverBubble: false, // remove the cloned element when it is not showing removeCloneOnHide: true, // distance mouse must be from empty sortable to insert drag element into it emptyInsertThreshold: 5, // px, // set data setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // scroll plugin options // Enable the plugin. Can be HTMLElement. scroll: true, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // px, how near the mouse must be to an edge to start scrolling. scrollSensitivity: 30, // px, speed of the scrolling scrollSpeed: 10, // apply autoscroll to all parent elements, allowing for easier movement bubbleScroll: true, // OnSpill Plugin options // Enable plugin revertOnSpill: true, // Called when item is spilled onSpill: function(/**Event*/evt) { evt.item // The spilled item }, // MultiDrag Plugin options // Enable the plugin multiDrag: true, // Class name for selected item selectedClass: "sortable-selected", // Key that must be down for items to be selected multiDragKey: null, // Called when an item is selected onSelect: function(/**Event*/evt) { evt.item // The selected item }, // Called when an item is deselected onDeselect: function(/**Event*/evt) { evt.item // The deselected item }, // Swap Plugin options // Enable swap mode swap: true, // Class name for swap item (if swap mode is enabled) swapClass: "sortable-swap-highlight", });
5. Callback features.
new Sortable(el, { // Element is chosen onChoose: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element is unchosen onUnchoose: function(/**Event*/evt) { // same properties as onEnd }, // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging ended onEnd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.to; // target list evt.from; // previous list evt.oldIndex; // element's old index within old parent evt.newIndex; // element's new index within new parent evt.clone // the clone element evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { // same properties as onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { // same properties as onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onEnd }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onEnd }, // Attempt to drag a filtered element onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: https://jsbin.com/nawahef/edit?js,output evt.dragged; // dragged HTMLElement evt.draggedRect; // DOMRect {left, top, right, bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // DOMRect evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default originalEvent.clientY; // mouse position // return false; — for cancel // return -1; — insert before target // return 1; — insert after target }, // Called when creating a clone of element onClone: function (/**Event*/evt) { var origEl = evt.item; var cloneEl = evt.clone; }, // Called when dragging element changes position onChange: function(/**Event*/evt) { evt.newIndex // most likely why this event is used is to get the dragging element's current index // same properties as onEnd } });
Sorting Library with Native HTML5 Drag and Drop, Sortable Plugin/Github
See Demo And Download
Official Website(SortableJS): Click Here
This superior jQuery/javascript plugin is developed by SortableJS. For extra Advanced Usages, please go to the official website.
Be First to Comment