Categories: CSSScriptWeb Design

Lightweight JS Sorting Library with Native HTML5 Drag and Drop – SortableJS

Sortable is a simple yet fully customizable javascript draggable library that makes a list of items sortable/reordered by using native Html5 drag and drop API. Works with all modern browsers and touch devices.

Table of Contents

Toggle

Installation:


Sponsored

 class="brush:other"># NPM
$ npm install sortablejs --save

How to use it:

1. Import the SortableJS.

import Sortable from 'sortablejs';

// or
<script src="Sortable.min.js"></script>

2. Create a list of draggable items on the 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 functionality on the list.

new Sortable(document.getElementById('example'), {
    // options here
});

4. All possible options 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, 

    // force auto scroll fallback
    forceAutoScrollFallback: false,

    // 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",
    
});

Callback functions.

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
    }

});

Changelog:

v1.15.7 (02/12/2026)

Bugfixes

v1.15.6 (11/29/2024)

Restore pervious text clearing selection behaviour on fallback-enabled sortable lists. Text should be cleared whenever mouse is down on a sortable item, but text inputs within items should still be interactable
Fix issue where multi-drag selection doesn’t work on iOS devices

v1.15.5 (11/27/2024)

Further improvements to handling of text selection during drag, to allow text inputs to continue to function within sortable items.
Removed the previous nextTick solution which caused text inputs to be noninteractive, and instead have moved the text selection clearing to the actual drag start.

v1.15.4 (11/24/2024)

Fix issue where text selection occurs during dragging when fallback is enabled
Improved support for pointer events
[MultiDrag] Prevent multi-select of non-draggable and filtered items

v1.15.3 (09/01/2024)

Expose expando value in Sortable.utils
Fix inability to drag in fallback when handle has a shadowRoot
Include src folder in NPM package

v1.15.2 (01/04/2024)

Bugfix

v1.15.1 (12/01/2023)

Fix multi drag sort event not firing
Only call onDrop on destroy if dragged element inside parent element
Prevent drag item from jumping to end of list if last element has smaller width/height

v1.15.0 (03/21/2023)

Make sure dragged element is inserted after last dragged element
Added avoidImplicitDeselect option to MultiDrag
Remove ID from cloned element
Remove ignoring click on Chrome for Android when dragging (wasn’t necessary)

v1.14.0 (07/04/2021)

Touch-Friendly JavaScript Drag and Drop Sortable Library – JSort

JSort is a JavaScript library that enables smooth, touch-enabled, drag-and-drop sorting for HTML lists and grids. Features: Zero dependencies: Pure vanilla JS with no external libraries required. Touch and mouse support: Unified pointer events API handles all input methods. Smooth animations: All displaced elements animate naturally during reordering. Linked groups:…

January 27, 2026

In "CSSScript"

Mobile-First Drag and Drop Alternative for List Reordering – picknplace.js

picknplace.js is a JavaScript library that replaces traditional drag-and-drop with a two-step pick-and-place interaction pattern. Standard HTML5 drag and drop APIs are notoriously difficult to control on mobile devices. You might often accidentally scroll the page when you intend to move an item. Picknplace.js addresses this by changing the interaction…

December 18, 2025

In "CSSScript"

Tiny & Memory-optimized Drag and Drop Library – snap-dnd

snap-dnd is a lightweight JavaScript library that provides smooth, high-performance drag and drop interactions for modern web applications. The library works natively with Web Components, Shadow DOM, and Lit Elements through proper event delegation and scoped querying. You can implement drag-drop functionality using either declarative data attributes or a full…

January 9, 2026

In "CSSScript"

rssfeeds-admin