Sortable – A modern, vanilla Drag’n’Drop sorting library

Sortable

Rubaxas Fork of Farhadis HTML5 Sortable plugin says goodbye to jQuery as library behind, and welcome to IE and modern browsers, also on touch devices! It is really lightweight, uses the HTML 5 native Drag & Drop features and is also available for Meteor, AngularJS (1.*, 2.0+), React (ES2015+, Mixin), Knockout, Polymer and VueJS.

The last official Release was a year ago, June 2017, but the GitHub repository still receives some commits and passed pull requests. Nevertheless Rubaxa asks and looks since May 2018 for a new Maintainer with “chewing and appropriate skills”. But also without ongoing updates offers Sortable full support for lists, tables and div-based grids, with the possibility to connect multiple lists together, add/edit items directly, copying items and uses a drag handle.

Download the latest version of Sortable as .ZIP or as .TAR package!

npm i sortablejs --save

yarn add sortablejs --save

bower install sortablejs --save

Instructions

The Sortable plugin is available as “unpacked” and “packed” / minified file, the author offers also a jQuery implementation (which can be optional embeded too). This JavaScript is also available through jsDevlir:

https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js

 

Load Sortable

The single JavaScript file for the Sortable plugin can be located wherever you want, but we recommend to load it immediately after the opend <body> tag. If you want include the jQuery Implementation too remember to embed this file after the sortable(.min).js!

<DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/sortable.js"></script>
    </body>
</html>

 

Init Sortable

The file get’s parsed and now just a single line of code turns your lists and tables into D’n’D sortable masterpieces. To be sure, we write this line of code within the “DOMContentLoaded” event, which executes after the DOM has been loaded, but before all the page assets (Images, …) has.

document.addEventListener("DOMContentLoaded", function(){
    "use strict";
   
    // Just pass an selector
    Sortable.create(document.getElementById("sortable"));
});

 

Configure Sortable

Everything works, but not as we want to. No Problem, Sortable comes with a bunch of options.

Sortable.create(document.getElementById("sortable"), {
    group:                  "name",
    sort:                   true,
    delay:                  0,
    touchStartThreshold:    0,
    disabled:               false,
    store:                  null,
    animation:              150,
    handle:                 null,
    filter:                 ".ignore-elements",
    preventOnFilter:        true,
    draggable:              ".item",
    ghostClass:             "sortable-ghost",
    chosenClass:            "sortable-chosen",
    dragClass:              "sortable-drag",
    dataIdAttr:             "data-id",
    forceFallback:          false,
    fallbackClass:          "sortable-fallback",
    fallbackOnBody:         false,
    fallbackTolerance:      0,
    scroll:                 true,
    scrollFn:               function(){},
    scrollSensitivity:      30,
    scrollSpeed:            10
});

 

Configure: Options

group
To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.

  • name: String — group name
  • pull: true|false|’clone’|function — ability to move from the list. clone — copy the item, rather than move.
  • put: true|false|[“foo”, “bar”]|function — whether elements can be added from other lists, or an array of group names from which elements can be taken.
  • revertClone: boolean — revert cloned element to initial position after moving to a another list.
sort
True to sort the list, False to keep the default order.
delay
Time in milliseconds to define when the sorting should start.
touchStartThreshold
This option is similar to fallbackTolerance option. When the delay option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering. This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.

Values between 3 to 5 are good.

disabled
Disables the sortable if set to true.
store
animation
The animation speed in milliseconds moving items when sorting, 0 to disable the animation.
handle
To make list items draggable, Sortable disables text selection by the user. That’s not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
filter
Selectors that do not lead to dragging (String or Function)
preventOnFilter
Call `event.preventDefault()` when triggered `filter`.
draggable
Specifies which items inside the element should be draggable.
ghostClass
Class name for the drop placeholder (default sortable-ghost).
chosenClass
Class name for the chosen item (default sortable-chosen).
dragClass
Class name for the current dragged item (default sortable-drag).
dataIdAttr
The name of the data ID attribute, which should be used by serializing the sortable items into an array of strings.
forceFallback
If set to true, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag ‘n Drop feel more consistent between Desktop , Mobile and old Browsers.

On top of that, the Fallback always generates a copy of that DOM Element and appends the class fallbackClass defined in the options. This behaviour controls the look of this ‘dragged’ Element.

fallbackClass
Class name for the cloned DOM Element when using forceFallback (default sortable-fallback).
fallbackOnBody
Appends the cloned DOM Element into the Document’s Body.
fallbackTolerance
Emulates the native drag threshold. Specify in pixels how far the mouse should move before it’s considered as a drag. Useful if the items are also clickable like in a list of links.

When the user clicks inside a sortable element, it’s not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don’t accidentally start dragging every time you click.

3 to 5 are probably good values.

scroll
If set to true, the page (or sortable-area) scrolls when coming to an edge.
scrollFn
Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default. Useful when you have custom scrollbar with dedicated scroll function.
scrollSensitivity
Defines how near the mouse must be to an edge to start scrolling.
scrollSpeed
The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.

Leave a Reply

Top