@ -8,7 +8,7 @@ Demo: http://rubaxa.github.io/Sortable/
* Supports touch devices and [modern ](http://caniuse.com/#search=drag ) browsers
* Supports touch devices and [modern ](http://caniuse.com/#search=drag ) browsers
* Can drag from one list to another or within the same list
* Can drag from one list to another or within the same list
* Animation moving items when sorting (css animation)
* CSS animation when moving items
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
* Built using native HTML5 drag and drop API
* Built using native HTML5 drag and drop API
* Supports [AngularJS ](#ng ) and and any CSS library, e.g. [Bootstrap ](#bs )
* Supports [AngularJS ](#ng ) and and any CSS library, e.g. [Bootstrap ](#bs )
@ -30,13 +30,15 @@ var el = document.getElementById('items');
var sortable = Sortable.create(el);
var sortable = Sortable.create(el);
```
```
You can use any element for the list and its elements, not just `ul` /`li`. Here is an [example with `div`s ](http://jsbin.com/luxero/2/edit?html,js,output ).
---
---
### Options
### Options
```js
```js
var sortabe l = new Sortable(el, {
var sortable = new Sortable(el, {
group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] }
group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] }
sort: true, // sorting inside list
sort: true, // sorting inside list
store: null, // @see Store
store: null, // @see Store
@ -89,7 +91,7 @@ which is an area of every list element that allows it to be dragged around.
```js
```js
var sortable = new Sortable(el, {
var sortable = new Sortable(el, {
handle: ".my-handle",
handle: ".my-handle"
});
});
```
```
@ -114,9 +116,9 @@ var sortable = new Sortable(el, {
To drag elements from one list into another, both lists must have the same `group` value.
To drag elements from one list into another, both lists must have the same `group` value.
You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements.
You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements.
* name:`string` — group name
* name: `String` — group name
* pull:`true|false|'clone'` — ability to move from the list. `clone` — cloning drag item when moving from the list .
* pull: `true|false|'clone'` — ability to move from the list. `clone` — copy the item, rather than move .
* put:`true|false|["foo", "bar"]` — the possibility of adding an element from the other list, or an array of names groups, which can be taken.
* put: `true|false|["foo", "bar"]` — whether elements can be added from other lists, or an array of group names from which elements can be taken
---
---
@ -250,7 +252,7 @@ Sortable.create(el, {
< a name = "bs" > < / a >
< a name = "bs" > < / a >
### Bootstrap
### Bootstrap
Demo: http://jsbin.com/luxero/1/edi t
Demo: http://jsbin.com/luxero/2/edit?html,js,outpu t
```html
```html
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
@ -274,7 +276,7 @@ Demo: http://jsbin.com/luxero/1/edit
// Simple list
// Simple list
Sortable.create(simpleList, { /* options */ });
Sortable.create(simpleList, { /* options */ });
< / script >
< / script >
```
---
---
@ -299,7 +301,7 @@ Demo: http://jsbin.com/luxero/1/edit
## MIT LICENSE
## MIT LICENSE
Copyright 2013 Lebedev Konstantin < ibnRubaXa @ gmail . com >
Copyright 2013-2014 Lebedev Konstantin < ibnRubaXa @ gmail . com >
http://rubaxa.github.io/Sortable/
http://rubaxa.github.io/Sortable/
Permission is hereby granted, free of charge, to any person obtaining
Permission is hereby granted, free of charge, to any person obtaining