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

Category: Drag & Drop , Javascript | January 2, 2014
Author:
Views Total: 3,870
Official Page: Go to website
Last Update: January 2, 2014
License: MIT

Preview:

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

Description:

Sortable is a lightweight and simple javascript library that makes a list of items sortable by using native Html5 drag and drop API. Works with all the modern browsers and touch devices.

How to use it:

1. Create a list of items on the page.

<ul id="foo">
<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>

2. Include Sortable.js script at the bottom of your page to reduce the page load time.

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

3. The javascript.

<script>
(function (){

new Sortable(foo, {
group: "words",
handle: ".my-handle", // Restricts sort start click/touch to the specified element
draggable: ".item",   // Specifies which items inside the element should be sortable
ghostClass: "sortable-ghost",
onAdd: function (evt){
        var itemEl = evt.item;
    },

    onUpdate: function (evt){
        var itemEl = evt.item; // the current dragged HTMLElement
    },

    onRemove: function (evt){
        var itemEl = evt.item;
    }
});

</script>