jquery mobile开发手机webapp页面（三）拖动排序插件Sortable

这一篇我来分享一下拖动排序插件Sortable.js这是一款小型的支持手机端排序功能的插件。非常好用。

首先要引入文件

[html]  view plain  copy

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

接下来我们需要一个列表例如这样

[html]  view plain  copy

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

初始化js

[html]  view plain  copy

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

当然这时候你的列表已经可以排序了，但如果你还需要一些设定可以用下面的方法。

[html]  view plain  copy

1. new Sortable(el, {  
2.     group: "name",  
3.     store: null, // @see Store  
4.     handle: ".my-handle", // 点击目标元素约束开始  
5.     draggable: ".item",   // 指定那些选项需要排序  
6.     ghostClass: "sortable-ghost",  
7.    
8.     onStart: function (/**Event*/evt) { // 拖拽  
9.         var itemEl = evt.item;  
10.     },  
11.    
12.     onEnd: function (/**Event*/evt) { // 拖拽  
13.         var itemEl = evt.item;  
14.     },  
15.    
16.     onAdd: function (/**Event*/evt){  
17.         var itemEl = evt.item;  
18.     },  
19.    
20.     onUpdate: function (/**Event*/evt){  
21.         var itemEl = evt.item; // 当前拖拽的html元素  
22.     },  
23.    
24.     onRemove: function (/**Event*/evt){  
25.         var itemEl = evt.item;  
26.     }  
27. });  

如果你需要获得排序后的数据可以用下面的方法

[html]  view plain  copy

1. new Sortable(el, {  
2.     group: "localStorage-example",  
3.     store: {  
4.         /**  
5.          * Get the order of elements. Called once during initialization.  
6.          * @param   {Sortable}  sortable  
7.          * @retruns {Array}  
8.          */  
9.         get: function (sortable) {  
10.             var order = localStorage.getItem(sortable.options.group);  
11.             return order ? order.split('|') : [];  
12.         },  
13.    
14.         /**  
15.          * Save the order of elements. Called every time at the drag end.  
16.          * @param {Sortable}  sortable  
17.          */  
18.         set: function (sortable) {  
19.             var order = sortable.toArray();  
20.             localStorage.setItem(sortable.options.group, order.join('|'));  
21.         }  
22.     }  
23. })  

需要注意的是：

toArray():String[]

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

扫描二维码关注公众号，回复： 130750 查看本文章

sort(order:String[])

通过数组排序元素

var order = sortable.toArray();

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

destroy()

保存与恢复排序

下面是我项目中应用的代码：

[html]  view plain  copy

1. // 排序功能  
2.     var app = document.getElementById('kuang');  
3.     var sort = Sortable.create(app, {  
4.         group: "bowen",  
5.         handle: ".toolbar",  
6.         filter: '.del_bar',  
7.         onFilter: function (evt) {  
8.             jQuery('.cover').show('500');  
9.             jQuery('.cover .left').unbind('click');  
10.             jQuery('.cover .left').click(function() {  
11.                 jQuery('.cover').hide('200');  
12.             });  
13.             jQuery('.cover .right').unbind('click');  
14.             jQuery('.cover .right').click(function() {  
15.                 var pd = jQuery('input[name=picsort]').val().split(',');  
16.                 if (pd.length == 2) {  
17.                     alert('最后一张无法删除');  
18.                     return false;  
19.                 };  
20.                 var delpic = evt.item.parentNode.parentNode.getAttribute("data-id");  
21.                 var id = jQuery('.pid').val();  
22.                 jQuery.ajax({  
23.                     url: './source/blog/delpic.php',  
24.                     type: 'POST',  
25.                     data: {delpic:delpic},  
26.                     success:function(data){  
27.                           
28.                     }  
29.                 })  
30.                 evt.item.parentNode.parentNode.parentNode.removeChild(evt.item.parentNode.parentNode);  
31.                 var sorts = '';  
32.                     jQuery('#kuang li').each(function(index, el) {  
33.                         sorts += ','+jQuery(this).attr('data-id');  
34.                     });  
35.                 var id = jQuery('.pid').val();  
36.                 jQuery.ajax({  
37.                     url: './source/blog/delsorts.php',  
38.                     type: 'POST',  
39.                     dataType: 'json',  
40.                     data: {newsort: sorts,id:id},  
41.                     success:function(data){  
42.                           
43.                     }  
44.                       
45.                 })  
46.                 jQuery('.cover').hide('1000');  
47.                 var timer = setTimeout('window.location.reload()',3000);  
48.                   
49.             });  
50.               
51.         },  
52.         store: {  
53.       
54.             get: function (sortable) {  
55.                 var order = localStorage.getItem(sortable.options.group);  
56.                 // return order ? order.split('|') : [];  
57.             },  
58.             set: function (sortable) {  
59.                 var order = sortable.toArray();  
60.                 localStorage.setItem(sortable.options.group, order.join('|'));  
61.                 var id = jQuery('.pid').val();  
62.                 jQuery.ajax({  
63.                     url: './source/blog/changesorts.php',  
64.                     type: 'POST',  
65.                     dataType: 'json',  
66.                     data: {newsort: order,id:id},  
67.                 })  
68.                   
69.             }  
70.         },  
71.         onUpdate: function(evt){  
72.             var item = evt.item;  
73.         }  
74.           
75.     })  
76.     sort.destroy();  

下面是html代码

[html]  view plain  copy

1. <ul data-role="listview" data-inset="true" id="kuang">  
2.     <!--{loop $piclist $v}-->  
3.     <li class="bar" data-id="$v['picid']" style="position:relative;">  
4.         <div class="move" style="overflow:hidden;">  
5.             <div style="width: 875px;" class="leftside">  
6.                 <a href="http://bbs.photofans.cn/blog.php?mod=edit_mob&picid=$v['picid']" data-ajax="false">  
7.                     <img src="http://www.fansimg.com/$v['uploader']_s/$v['imagename']" alt="" style="height:50px;width:50px;margin-left:10px;display:block;float:left;" class="toolbar">  
8.                 </a>  
9.                 <div id="infor" style="font-size:12px;float:left;margin-left:10px;height:50px;width:20%;white-space:pre-wrap;">  
10.                     <div class="infor_up" style="position:absolute;top:0px;height:15px;overflow:hidden;">$v['txt1']</div>  
11.                     <div class="infor_down" style="position:absolute;bottom:0px;height:15px;overflow:hidden;">$v['txt2']</div>  
12.                 </div>  
13.                 <input name="picid" class="picid" value="$v['picid']" type="hidden">  
14.                   
15.             </div>  
16.         </div>  
17.         <div class="button_scroll">  
18.             <a href="http://bbs.photofans.cn/blog.php?mod=edit_mob&picid=$v['picid']" class="edit_bar" data-ajax="false"><span class="icon iconfont"></span></a>  
19.             <span class="del_bar icon iconfont"></span>  
20.             <span class="toolbar" style="line-height:54.9px;height:24px;width:30px;display:block;background:url(./template/default/blog/images/zhuadian.png) no-repeat scroll center center;background-size:20px 20px;padding-top:54px;position:absolute;top:0px;left:116px;"></span>  
21.         </div>  
22.     </li>  
23.     <!--{/loop}-->  
24. </ul>  

因为页面中用到了jquery mobile框架，所以排序的列表我用的是listview。

应该注意的是，这个插件如果和uploadifive一起用的话，应该放在uploadifive js代码的下方，如果放在上面，上传功能是不会起作用的。排序插件还支持删除功能，设置filter为触点class值，就可以点击删除了。怎么样功能还是很强大的吧。

好了就到这里。