HTML5 Sortable

Lightweight standalone library for creating sortable lists and grids using native HTML5 drag and drop API.

Only 2.54KB (minified and gzipped).
Built using native HTML5 drag and drop API.
Supports both list and grid style layouts.
Installation, support & more.

Sortable List


							sortable('.o-sortable', {
							
								forcePlaceholderSize: true,

								placeholderClass: 'ph-class', 

								hoverClass: 'bg-maroon yellow', 

							
							});

Item 1
Item 2
Item 3
Item 4
Item 5

Serialized:

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
||Only 3 children allowed
- ||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
||Only 3 children allowed
- ||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 5
Item 6

Sortable Table

Tables rows can be sorted too, by making the container the tbody and setting the items property to tr.

Food	Topping	Absolutely No

Taco	Salsa	Pickles
Burger	Lettuce	Rice
Pad Thai	Crushed Red Pepper	Spaghetti Noodles
Bratwurst	Sourkraut	Jelly

Simple	Simple	Simple
Table	Table	Table
Bratwurst	Bratwurst	Bratwurst

acceptFrom

acceptFrom allows to control which sortable to accept drops from.

Item 1-6 are allows to be sorted with Item 7-12 but not the other way around.


						sortable('.o-sortable1', {
						acceptFrom: false (accept from no one)
						});
						sortable('.o-sortable2', {
						acceptFrom: '.o-sortable1' (accept from .o-sortable1)
						});

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

Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Ghost test

Sortable Copy


					sortable('.o-sortable', {
					copy:true // default to false
					maxItems: 2
					});

Copy items here

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