HTML5 Sortable library

HTML5 Sortable
Fork on GitHub

# 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