HTML5 Sortable

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

DEPRECATION NOTICE

This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead.

Why another sortable plugin?

Because it's better.

Well, If you want to read the whole story read it here.

Features

How to use it?

Download it from here. Then use it like this:

<ul class="sortable">
	<li>Item 1
	<li>Item 2
	<li>Item 3
	<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
	$('.sortable').sortable();
</script>

Use .sortable-dragging and .sortable-placeholder selectors to change the styles of a dragging item and its placeholder respectively.

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

$('.sortable').sortable().bind('sortupdate', function() {
	//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 create sortable lists with handles:

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

Use connectWith option to create connected lists:

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

To remove the sortable functionality completely:

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

To disable the sortable temporarily:

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

To enable a disabled sortable:

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

The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:

yepnope({
	test: Modernizr.draganddrop,
	yep: 'jquery.sortable.js',
	nope: 'jquery-ui.min.js',
	complete: function() {
		$('.sortable').sortable().bind('sortupdate', function() {
			//Store the new order.
		}
	}
});

Demos

Sortable List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable Grid

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable List With Disabled Items

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable List With Handles

  • :: Item 1
  • :: Item 2
  • :: Item 3
  • :: Item 4
  • :: Item 5
  • :: Item 6

Connected Sortable Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

License

HTML5 Sortable is released under the MIT license.