Native HTML5 Drag and Drop – sortable.js

Preview:

Description:

sortable.js allows you to re-sort a list of items using native Html5 drag and drop function without any dependencies.

How to use it:

Create a list of items to be sortable via drag and drop.

<div class="column"><header>A</header></div>
<div class="column"><header>B</header></div>
<div class="column"><header>C</header></div>
<div class="column"><header>D</header></div>
<div class="column"><header>E</header></div>

The required CSS to prevent the text contents of draggable elements from being selectable.

[draggable] {
 -moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 -khtml-user-drag: element;
 -webkit-user-drag: element;
}

Load the  sortable.js at the end of the document.

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

Enable the Html5 drag and drop on the target items.

Sortable({
  els: '.column'
});

Destroy method.

s.destroy();

Changelog:

03/05/2015

• Bugfix