|
|
@ -1,17 +1,17 @@ |
|
|
|
# Sortable |
|
|
|
# Sortable |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. |
|
|
|
|
|
|
|
|
|
|
|
## Features |
|
|
|
## Features |
|
|
|
* Support 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 |
|
|
|
* Animation moving items when sorting (css animation) |
|
|
|
* Animation moving items when sorting (css animation) |
|
|
|
* Built using native HTML5 drag and drop API |
|
|
|
* Built using native HTML5 drag and drop API |
|
|
|
* Support [AngularJS](#ng) |
|
|
|
* Support [AngularJS](#ng) |
|
|
|
* Simple API |
|
|
|
* Simple API |
|
|
|
* Lightweight, 2KB gzipped |
|
|
|
|
|
|
|
* No jQuery |
|
|
|
* No jQuery |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Usage |
|
|
|
### Usage |
|
|
|
```html |
|
|
|
```html |
|
|
|
<ul id="items"> |
|
|
|
<ul id="items"> |
|
|
@ -41,6 +41,9 @@ var sortabel = new Sortable(el, { |
|
|
|
filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function) |
|
|
|
filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function) |
|
|
|
draggable: ".item", // Specifies which items inside the element should be sortable |
|
|
|
draggable: ".item", // Specifies which items inside the element should be sortable |
|
|
|
ghostClass: "sortable-ghost", |
|
|
|
ghostClass: "sortable-ghost", |
|
|
|
|
|
|
|
setData: function (dataTransfer, dragEl) { |
|
|
|
|
|
|
|
dataTransfer.setData('Text', dragEl.textContent); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onStart: function (/**Event*/evt) { /* dragging */ }, |
|
|
|
onStart: function (/**Event*/evt) { /* dragging */ }, |
|
|
|
onEnd: function (/**Event*/evt) { /* dragging */ }, |
|
|
|
onEnd: function (/**Event*/evt) { /* dragging */ }, |
|
|
|