HTML5 Sortable – A tiny, vanilla Drag’n’Drop sorting library


Lukas Oppermanns Version of Farhadis HTML5 Sortable plugin is, like the original one, a really lightweight library which uses the HTML 5 Drag & Drop features. However, this one does not required jQuery as library behind it is written completely in pure Typescript (with a respective JavaScript subset interpreted file). So it comes without any dependencies, and the HTML5 Sortable plugin is available as plain iife script as well as ES6, AMD and CommonJS Module.

It is really hard to find a working vanilla JavaScript sortable library, which is still maintained. HTML5 Sortable is one of these rare projects, which also supports connctected and nested lists, tables and div-based grids, item exclusion and item copying! Only drawback: It’s not compatible with any Internet Exlporer, except IE 11 with the respective Polyfill.

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

npm i html5sortable --save

yarn add html5sortable --save

bower install html5sortable --save


The HTML5 Sortable comes in different versions depending on your application. To just use the Browser edition, download and use the dist/html5sortable.js or dist/html5sortable.min.js (with the respective SourceMap, if needed). The project doesn’t offer any stylesheets, so the design-part of this script is completely up to you!


Load HTML5 Sortable

The single JavaScript file for the HTML5 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 IE11 Polyfill too remember to embed this file before the html5sortable.js!

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


Init HTML5 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


Configure HTML5 Sortable

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

 sortable(".sortable", {
    items:                  null,
    handle:                 null,
    acceptFrom:             null,
    placeholder:            null,
    placeholderClass:       "sortable-placeholder"
    forcePlaceholderSize:   true,
    draggingClass:          "sortable-dragging",
    hoverClass:             false,
    maxItems:               0,
    copy:                   false,
    debounce:               0,
    throttleTime:           100,
    itemSerializer:         undefined,
    containerSerializer:    undefined,
    customDragImage:        null


Configure: Options

Use the items option to specify which items inside the element should be sortable.
Use the handle option to restrict drag start to the specified element.
Use the acceptFrom option to restrict which sortable’s items will be accepted by this sortable. acceptFrom accepts a space separated list of selectors or false to disabling accepting items. This is an alternative to connectWith and should not be used together.
Use the placeholder option to specify the markup of the placeholder
Use the hoverClass option to apply css classes to the placeholder element.
Setting the forcePlaceholderSize option to true, forces the placeholder to have a height.
Use the hoverClass option to apply css classes to the currently dragged element.
Use the hoverClass option to apply css classes to the hovered element rather than relying on :hover. This can eliminate some potential drag and drop issues where another element thinks it is being hovered over.
Use the maxItems option to restrict the number of items that can be added to a sortable from a connected sortable. maxItems should always be combined with the items option. Make sure items does not match placeholder and other options, so that they are not counted.
Use the copy option to duplicate the element on drag. The original element will remain in the same position.
You can provide a function that will be applied to every item in the items array (see serialize). The function receives two arguments: serializedItem: object, sortableContainer: Element. This function can be used to change the output for the items. Defaults to undefined.
You can provide a function that will be applied to the container object (see serialize). The function receives one argument: serializedContainer: object. This function can be used to change the output for the container. Defaults to undefined.
You can provide a function as a customDragImage property on the options object which will be used to create the item and position of the drag image (the half transparent item you see when dragging an element).

The function gets three parameters, the dragged element, an offset object with the offset values for the offset of the item and the dragstart event. The function MUST return an object with an element property with an html element as well as a posX and posY property with has the x and y offset for the dragImage.

Leave a Reply