jQuery Sorting Plugin with Native HTML5 Drag and Drop - draganddrop

Draganddrop is a small and easy jQuery plugin that allows you to rearrange a group of html elements with native HTML5 Drag and Drop feature.

Basic Usage:

1. Load the jQuery javascript library and draganddrop.js script in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../src/draganddrop.js"></script>

2. Create a container which contains a group of html elements you want to sort.

<div id="columns">
<div class="column" draggable="true">
<header>First</header>
</div>
<div class="column" draggable="true">
<header>Second</header>
</div>
<div class="column" draggable="true">
<header>Third</header>
</div>
</div>

3. Apply the plugin on the container.

<script type="text/javascript">
$(function() {
$('#columns > .column').draganddrop();			
});
</script>

4. The CSS for the plugin.

[draggable] {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#columns:after {
content: ' ';
clear: both;
display: table;
}
.column {
height: 200px;
line-height: 200px;
width: 200px;
float: left;
border: 2px solid #666;
background: #aaa;
margin-right: 5px;
border-radius: 10px;
text-align: center;
cursor: move;
}
.column.over {
border: 2px dashed #000;
}
.column.drag {
opacity: 0.6;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.column > header {
color: #fff;
}

---

This awesome jQuery plugin is developed by nange. For more Advanced Usages, please check the demo page or visit the official website.