No-jquery list <li> Sort Plugins--sortable.js

Items used in this list sorting plug-ins, relatively easy to use, do not rely on jquery, the other source code also has a lot to learn from the place, so recommend to everyone to try.

Official website: http://rubaxa.github.io/Sortable/

SortableFeatures

• Support Touch devices and modern browsers
• Built using native HTML5 drag and drop API
• Simple API
• Lightweight, 2KB gzipped
• No JQuery

Usage

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

"' Jsvar el = document.getElementById (' items '); new sortable (EL);

Options

New sortable (EL, {    group: "Name",    store:null,//@see store    handle: ". My-handle",//restricts sort start cli Ck/touch to the specified element    draggable: '. Item ',   //specifies which items inside the element should be Sortab Le    ghostclass: "Sortable-ghost",    onstart:function (/**event*/evt) {//dragging        var itemel = Evt.item;    } ,    onend:function (/**event*/evt) {//dragging        var itemel = Evt.item;    }, Onadd:function    (/**event* /EVT) {        var itemel = Evt.item;    },    onupdate:function (/**event*/evt) {        var itemel = Evt.item;//The CU Rrent dragged HtmlElement    },    onremove:function (/**event*/evt) {        var itemel = Evt.item;    }});

MethodToArray (): String[]

Serializes the sortable ' s item Data-id's to an array of string.

Sort (Order: Array)

Sorts the elements according to the array.

var order = Sortable.toarray (); Sortable.sort (Order.reverse ()); Apply

Destroy () Store

Saving and restoring of the sort.

New sortable (EL, {    group: "Localstorage-example",    store: {        /**         * Get 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 at the drag end.         * @param {sortable}  sortable         *        /set:function (sortable) {            var order = Sortable.toarray ();            Localstorage.setitem (Sortable.options.group, Order.join (' | '));}}    )

Sortable.utils

• On (El :HTMLElement , Event :String , fn :Function )-attach an event handler function
• Off (El :HTMLElement , Event :String , fn :Function )-remove an event handler
• CSS (el :HTMLElement )-get The values of all the :Object CSS properties
• CSS (el :HTMLElement , prop :String ) :Mixed -get The value of the style properties
• CSS (el :HTMLElement , prop :String , value :String )-set one CSS Properties
• CSS (el :HTMLElement , props :Object )-set more CSS Properties
• Find (ctx :HTMLElement , TagName :String [, iterator :Function ]) :Array -get elements by tag name
• Bind (CTX :Mixed , fn :Function ) :Function -takes a function and returns a new one that'll always has a particular context
• Closest (El :HTMLElement , selector :String [, CTX :HTMLElement ]) :HTMLElement|Null -for Each element of the set, get the first element that matches the SEL Ector by testing the element itself and traversing up through their ancestors in the DOM tree
• Toggleclass (El :HTMLElement , name :String , state :Boolean )-add or remove one classes from each element