Native HTML5 Drag and Drop – sortable.js

Category: Drag & Drop , Javascript | March 6, 2015
Author: taylorhakes
Views Total: 5,579
Official Page: Go to website
Last Update: March 6, 2015
License: MIT


Native HTML5 Drag and Drop – sortable.js


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.

  els: '.column'

Destroy method.




  • Bugfix

You Might Be Interested In:

Leave a Reply