Html5sortable is very simple and lightweight jQuery plugin that built using native HTML5 drag and drops API. Style of the elements are controlled with pure CSS so list or grid layout can be modified easily with the help of the CSS. Implement process of the plugin is very easy so it can be implemented easily without any extra coding knowledge.

Features:

• Easy to implement.
• Lightweight, less than 1KB (minified and gzipped).
• Can be modified the style easily with the help of CSS.
• Supports on all modern browser and devices.
• Supports both list and grid style layouts.

How to use it:

1. Include the Javascript jquery.sortable.min.js at the bottom of the web page.

<script src="path/to/jquery.sortable.min.js"></script>

2. Add the basic HTML to the page.

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

3. Initialize the plugin and we're ready to go.

$(function() {
  $('.sortable').sortable();
});

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

$('.sortable').sortable().bind('sortupdate', function(e, ui) {
    //ui.item contains the current dragged element.
    //Triggered when the user stopped sorting and the DOM position has changed.
});

Use items option to specifiy which items inside the element should be sortable:

$('.sortable').sortable({
  items: ':not(.disabled)'
});

Use handle option to restrict drag start to the specified element:

$('.sortable').sortable({
  handle: 'h2'
});

Setting forcePlaceholderSize option to true, forces the placeholder to have a height:

$('.sortable').sortable({
  forcePlaceholderSize: true
});

Use connectWith option to create connected lists:

$('#sortable1, #sortable2').sortable({
  connectWith: '.connected'
});

To destroy the sortable functionality completely:

$('.sortable').sortable('destroy');

To disable the sortable temporarily:

$('.sortable').sortable('disable');

To enable a disabled sortable:

$('.sortable').sortable('enable');

<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>

$(function() {
  $('.sortable').sortable();
});

<ul class="sortable grid">
  <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>

$(function() {
  $('.sortable').sortable();
});

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

$(function() {
  $('.exclude').sortable({
    items: ':not(.disabled)'
  });
});

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

$(function() {
  $('.handles').sortable({
    handle: 'span'
  });
});

<ul class="connected 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>
<ul class="connected list no2">
  <li class="highlight">Item 1</li>
  <li class="highlight">Item 2</li>
  <li class="highlight">Item 3</li>
  <li class="highlight">Item 4</li>
  <li class="highlight">Item 5</li>
  <li class="highlight">Item 6</li>
</ul>

$(function() {
  $('.connected').sortable({
    connectWith: '.connected'
  });
});