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

HTML5SortableVanilla

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

Instructions

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>
<html>
    <head>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/html5sortable.js"></script>
    </body>
</html>

 

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
    sortable(".sortable");
});

 

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

items
Use the items option to specify which items inside the element should be sortable.
handle
Use the handle option to restrict drag start to the specified element.
acceptFrom
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.
placeholder
Use the placeholder option to specify the markup of the placeholder
placeholderClass
Use the hoverClass option to apply css classes to the placeholder element.
forcePlaceholderSize
Setting the forcePlaceholderSize option to true, forces the placeholder to have a height.
draggingClass
Use the hoverClass option to apply css classes to the currently dragged element.
hoverClass
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.
maxItems
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.
copy
Use the copy option to duplicate the element on drag. The original element will remain in the same position.
itemSerializer
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.
containerSerializer
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.
customDragImage
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

Top