超强的拖拽排序插件Sortable

Sortable是一个独立的JS插件，不需要jquery，Sortable非常轻量，压缩后只有2KB，适用现代浏览器与移动设备。使用Sortable可以轻松实现鼠标拖拽排序，让用户操作更方便，具有极强的体验性。

特点

支持触摸设备和现代浏览器

使用本地化HTML5 API拖拽

简单的API

轻量级的,压缩只有2 kb

无需jQuery

使用方法

引入核心文件Sortable

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

构建html，不局限于3个，可以N个

1 2 3 4 5

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

写入JS初始化

1 2	var el = document.getElementById('items'); new Sortable(el);

参数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

new Sortable(el, {     group: "name",     store: null, // @see Store     handle: ".my-handle", // 点击目标元素约束开始     draggable: ".item",   // 指定那些选项需要排序     ghostClass: "sortable-ghost",       onStart: function (/**Event*/evt) { // 拖拽         var itemEl = evt.item;     },       onEnd: function (/**Event*/evt) { // 拖拽         var itemEl = evt.item;     },       onAdd: function (/**Event*/evt){         var itemEl = evt.item;     },       onUpdate: function (/**Event*/evt){         var itemEl = evt.item; // 当前拖拽的html元素     },       onRemove: function (/**Event*/evt){         var itemEl = evt.item;     } });

方法

toArray():String[]

把需要排序的选项序列化成字符数组

sort(order:String[])

通过数组排序元素

var order = sortable.toArray();

sortable.sort(order.reverse()); // apply

 

destroy()

保存与恢复排序

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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('|'));         }     } })

 

 

 

原文链接：http://www.jqcool.net/sortable.html