HTML5 Sortable

A lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Less than 1KB (minified and gzipped).
Built using native HTML5 drag and drop API.
Supports both list and grid style layouts.
Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.
Comes with an AngularJS directive.

Sortable List


							$('.o-sortable').sortable({
							// options
							});

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Ghost test

Sortable Grid


							$('.o-sortable').sortable({
							// options
							});

1

2

3

4

5

Exclude items & nested list


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

Item 1
Item 2
Item 3
disabled 3
- Item 3.1
- Item 3.2
disabled 5
Item 6

Connected lists

Connected: This means an item can be draged into another (connected) list.

Handles: Elements, e.g. || an item can be dragged with.

||Item 1
||Item 2
- ||Inner item 1
- ||Inner item 2
||Item 3
||Item 4
||Item 5
||Item 6


						// white & orange items
						$('.o-sortable').sortable({
						connectWith: 'js-connected'
						});
						// blue items
						$('.o-sortable-inner').sortable({
						connectWith: 'js-inner-connected'
						});

||Item 1
||Item 2
||Item 3
||Item 4
- ||Inner item 3
- ||Inner item 4

Exclude items & nested list


							// disabled / enable list
							$('.o-sortable').sortable('disable');
							$('.o-sortable').sortable('enable');
							// reload list after adding items
							$('.o-sortable').sortable('reload');

Item 1
Item 2
Item 3
Item 4
Item 6
Item 6