Sortable Lists and Grids with jQuery & HTML5 - html5sortable

html5sortable is lightweight (~1kb minified and gzipped) jQuery Plugin that make it easier to create Sortable Lists and Grids using native HTML5 drag and drop API.

Basic Usage (Create a simple sortable list):

1. Markup

<ul class="sortable list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

2. Include jQuery library and html5sortable.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.sortable.js"></script> 

3. The CSS

.sortable {
margin: auto;
padding: 0;
width: 310px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}

4. Call the plugin

<script>
	$(function() {
		$('.sortable').sortable();
	});
</script>

---

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