HTML5 Sortable

Lightweight standalone library for creating 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


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

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

Sortable Grid


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

1

2

3

4

5

Exclude items & nested list


							sortable('.o-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 dragged 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
						sortable('.o-sortable', {
						connectWith: 'js-connected'
						});
						// blue items
						sortable('.o-sortable-inner', {
						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
							sortable('.o-sortable', 'disable');
							sortable('.o-sortable', 'enable');
							// reload list after adding items
							sortable('.o-sortable', 'reload');

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