mirror of https://github.com/RubaXa/Sortable.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
746 B
47 lines
746 B
11 years ago
|
# Sortable
|
||
|
|
|
||
|
|
|
||
|
|
## Features
|
||
|
|
* Support touch devices
|
||
|
|
* Built using native HTML5 drag and drop API
|
||
|
|
* Simple API
|
||
|
|
* Lightweight, 2KB gzipped
|
||
|
|
* No jQuery
|
||
|
|
|
||
|
|
|
||
|
|
### Usage
|
||
|
|
```html
|
||
|
|
<ul id="items">
|
||
|
|
<li>item 1</li>
|
||
|
|
<li>item 2</li>
|
||
|
|
<li>item 3</li>
|
||
|
|
</ul>
|
||
|
|
```
|
||
|
|
|
||
|
|
```js
|
||
|
|
new Sortable(items);
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
### Options
|
||
|
|
```js
|
||
|
|
new Sortable(elem, {
|
||
|
|
group: "name",
|
||
|
|
handle: ".my-handle", // Restricts sort start click/touch to the specified element
|
||
|
|
draggable: ".item", // Specifies which items inside the element should be sortable
|
||
|
|
ghostClass: "sortable-ghost",
|
||
|
|
|
||
|
|
onAdd: function (evt){
|
||
|
|
var itemEl = ui.detail;
|
||
|
|
},
|
||
|
|
|
||
|
|
onUpdate: function (evt){
|
||
|
|
var itemEl = ui.detail; // the current dragged HTMLElement
|
||
|
|
},
|
||
|
|
|
||
|
|
onRemove: function (evt){
|
||
|
|
var itemEl = ui.detail;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
```
|