HTML5 Sortable Angular single Angular connected Angular ngRepeat
Fork on GitHub

# 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