Community maintained

[!WARNING] A fair warning: this repository is currently not being actively developed. It works pretty fine, but if you find any issues you will need to fix them yourself. I try to keep the dependencies up to date and will happily help you fix issues and merge PRs for bugfixes or new features.

<h1> HTML5Sortable </h1>

Lightweight vanillajs micro-library for creating sortable lists and grids using native HTML5 drag and drop API.

Table of Contents

• Community maintained
• Looking for Co-Maintainer
• Features
• Framework adapters
• Installation
• Examples
• Docs
  • Usage
  • Styling
  • Nesting
  • Events
  • Options
  • Methods
  • Sorting table rows
• Contributing
• Polyfills
• Touch Support
• Known Issues

Looking for Co-Maintainer

If you are interested in actively helping with maintaining & improving this project please send me a message via twitter @lukasoppermann or email oppermann.lukas@gmail.com with a short text of what you would like to do on the project. This may be something small like sorting issues and helping with questions and small bugs (if you have little time or are not that experienced) or something big like tackling big features.

Features

• Only 2KB (minified and gzipped).
• Built using native HTML5 drag and drop API. No dependencies.
• Supports both list and grid style layouts.
• Supported Browsers: Current versions of all major browsers (Chrome, Firefox, Safari, Opera, Edge), IE11+ (Polyfill required)
• Available as ES6 Module, AMD, CommonJS and iffe with sortable global

Demo: Check out the examples

Framework adapters

If you would like to add an adapter to the list, please create an issue with the link to your adapter.

• Polymer: https://github.com/trofrigo/polymer-html5sortable

Installation

We recommend installing the package via npm.

npm install html5sortable --save

Once you install the package using npm or downloading the latest release (don't use the master branch), load file you need from the dist/ directory, e.g. dist/html.sortable.min.js for the minified iife version.

• iffe (loading file via script tag): dist/html5sortable.js or dist/html5sortable.min.js
• ES6 Module: dist/html5sortable.es.js
• CommonJS Module: dist/html5sortable.cjs.js
• AMD Module: dist/html5sortable.amd.js

Still using bower? bower install https://github.com/lukasoppermann/html5sortable.git

Examples

You can find the examples online or test locally. Warning: the online demo is just to show off the features and is most likely not up to date. Please study this readme file for the current way of implementing and using html5sortable.

Docs

Usage

Use sortable method to create a sortable list:

sortable('.sortable');

Styling

Use .sortable-placeholder CSS selectors to change the styles of the placeholder. You may change the class by setting the placeholderClass option in the config object.

sortable('.sortable', {
  placeholderClass: 'my-placeholder fade'
});

Nesting

You can nest sortables inside each other. However, take care to add a wrapper around the items, a sortable-item can not at the same time be a sortable.

<div class="list"><!-- Sortable -->
  <div class="item"> Item 1
    <div class="sublist"><!-- Nested Sortable; Wrapping container needed -->
      <div class="subitem">Subitem 1</div>
      <div class="subitem">Subitem 2</div>
    </div>
  </div>
  <div class="item"> Item 2 </div>
</div>

Events

NOTE: Events can be listened on any element from the group (when using connectWith), since the same event will be dispatched on all of them.

sortstart

Use sortstart event if you want to do something when sorting starts:

sortable('.sortable')[0].addEventListener('sortstart', function(e) {
    /*

    This event is triggered when the user starts sorting and the DOM position has not yet changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    */
});

sortstop

Use the sortstop event if you want to do something when sorting stops:

sortable('.sortable')[0].addEventListener('sortstop', function(e) {
    /*

    This event is triggered when the user stops sorting and the DOM position has not yet changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    */
});

sortupdate

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

sortable('.sortable')[0].addEventListener('sortupdate', function(e) {

    console.log(e.detail);

    /*
    This event is triggered when the user stopped sorting and the DOM position has changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    e.detail.origin.itemsBeforeUpdate - {Array} Sortable Items before the move
    e.detail.origin.items - {Array} Sortable Items after the move

    Destination Container Data
    e.detail.destination.index - {Integer} Index of the element within Sortable Items Only
    e.detail.destination.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.destination.container - {HTMLElement} Sortable Container that element is moved into (or copied into)
    e.detail.destination.itemsBeforeUpdate - {Array} Sortable Items before the move
    e.detail.destination.items - {Array} Sortable Items after the move
    */
});

sortenter

Fired when a dragitem enters a sortable container.

sortleave

Fired when a dragitem leaves a sortable container.

Options

items

Use the items option to specify which items inside the element should be sortable:

sortable('.sortable', {
    items: ':not(.disabled)'
});

handle

Use the handle option to restrict drag start to the specified element:

sortable('.sortable', {
    handle: 'h2'
});

forcePlaceholderSize

Setting the forcePlaceholderSize option to true, forces the placeholder to have a height:

sortable('.sortable', {
    forcePlaceholderSize: true
});

connectWith

Use acceptFrom instead. The connectWith option allows you to create a connected lists:

sortable('.js-sortable, .js-second-sortable', {
    connectWith: 'connected' // unique string, which is not used for other connectWith sortables
});

acceptFrom

Use the acceptFrom option to restrict which sortable's items will be accepted by this sortable. acceptFrom accepts a comma separated list of selectors or false to disabling accepting items. This is an alternative to the now deprecated connectWith and should not be used together.

sortable('.sortable', {
  acce