How to use the jquery drag-and-drop sorting plug-in Sortable

Sortable is a stand-alone JS plug-in, do not need jquery,sortable very lightweight, compressed only 2KB, suitable for modern browsers and mobile devices. The use of sortable can easily implement the mouse drag and drop sorting, allowing users to operate more convenient, with a strong experience.

Characteristics

Support for touch devices and modern browsers

Use the localized HTML5 API to drag

A simple API

Lightweight, compression is only 2 KB

No jquery required

How to use

Introduction of core files sortable

<script src= "Sortable.js" ></script>

Build HTML, not limited to 3, you can n

Default

<ul id= "Items" >
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Write JS initialization

var el = document.getElementById (' items ');
New sortable (EL);

Default

New sortable (EL, {
Group: "Name",
Store:null,//@see Store
Handle: ". My-handle",//click on target element constraint start
Draggable: ". Item",//Specify which options need to be sorted
Ghostclass: "Sortable-ghost",

Onstart:function (/**EVENT*/EVT) {//drag
var Itemel = Evt.item;
},

Onend:function (/**EVENT*/EVT) {//drag
var Itemel = Evt.item;
},

Onadd:function (/**EVENT*/EVT) {
var Itemel = Evt.item;
},

Onupdate:function (/**EVENT*/EVT) {
var Itemel = Evt.item; The currently dragged HTML element
},

Onremove:function (/**EVENT*/EVT) {
var Itemel = Evt.item;
}
});

Method

ToArray (): string[]

Serialize the options you want to sort into a character array

Sort (order:string[])

Sort elements by array

var order = Sortable.toarray ();

Sortable.sort (Order.reverse ()); Apply

Destroy ()

Saving and resuming sorting

Default

New sortable (EL, {
Group: "Localstorage-example",
Store: {
/**
* Get is the order of elements. Called once during initialization.
* @param {sortable} sortable
* @retruns {Array}
*/
Get:function (sortable) {
var order = Localstorage.getitem (Sortable.options.group);
Return order? Order.split (' | '): [];
},

/**
* Save the order of elements. Called every time on the drag end.
* @param {sortable} sortable
*/
Set:function (sortable) {
var order = Sortable.toarray ();
Localstorage.setitem (Sortable.options.group, Order.join (' | '));
}
}
})