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.
Features
- Supports touch devices and modern browsers (including IE9)
- Can drag from one list to another or within the same list
- CSS animation when moving items
- Supports drag handles and selectable text (better than voidberg’s html5sortable)
- Smart auto-scrolling
- Advanced swap detection
- Smooth animations
- Multi-drag support
- Support for CSS transforms
- Built using native HTML5 drag-and-drop API
- Supports
- Meteor
- Angular
- 2.0+
- 1.*
- React
- ES2015+
- Mixin
- Knockout
- Polymer
- Vue
- Ember
- Supports any CSS library, e.g. Bootstrap
- Simple API
- Support for plugins
- CDN
- No jQuery is required (but there is support)
- Typescript definitions at
@types/sortablejs
Must Read: A Simple Drag-and-drop Hierarchical List For A Vue Component
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 } });
Static methods & properties
Sortable.create(el:HTMLElement
[, options:Object
]):Sortable
Create a new instance.
Must Read: Advanced Vue Drag-and-drop Component-Based On Sortable.js
Sortable
Sortable.active:The active Sortable instance.
Sortable.dragged:HTMLElement
The element being dragged.
Sortable.ghost:HTMLElement
The ghost element.
Sortable.clone:HTMLElement
The clone element.
Sortable.get(element:HTMLElement
):Sortable
Get the Sortable instance on an element.
Sortable.mount(plugin:...SortablePlugin|SortablePlugin[]
)
Mounts a plugin to Sortable.
See Also –
Enable HTML5-Based Drag-and-Drop Functionality In The List of Items | jQuery DragNDrop
Multi-Browser, Mobile-Compatible Drag-and-Drop JavaScript Library | Drog.js
Responsive Drag-and-Drop, Multi-Column Grid Layout | gridstack.js
See Demo And Download
Official Website(SortableJS): Click Here
This superior jQuery/javascript plugin is developed by SortableJS. For extra Advanced usage, please go to the official website.