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

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

首先要引入文件

<script src="Sortable.js"></script>
接下来我们需要一个列表例如这样

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

初始化js
var el = document.getElementById('items');
new Sortable(el);当然这时候你的列表已经可以排序了，但如果你还需要一些设定可以用下面的方法。
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;
}
});

如果你需要获得排序后的数据可以用下面的方法
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('|'));
}
}
})
需要注意的是：

toArray():String[]

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

sort(order:String[])

通过数组排序元素

var order = sortable.toArray();

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

destroy()

保存与恢复排序

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

// 排序功能
var app = document.getElementById('kuang');
var sort = Sortable.create(app, {
group: "bowen",
handle: ".toolbar",
filter: '.del_bar',
onFilter: function (evt) {
jQuery('.cover').show('500');
jQuery('.cover .left').unbind('click');
jQuery('.cover .left').click(function() {
jQuery('.cover').hide('200');
});
jQuery('.cover .right').unbind('click');
jQuery('.cover .right').click(function() {
var pd = jQuery('input[name=picsort]').val().split(',');
if (pd.length == 2) {
alert('最后一张无法删除');
return false;
};
var delpic = evt.item.parentNode.parentNode.getAttribute("data-id");
var id = jQuery('.pid').val();
jQuery.ajax({
url: './source/blog/delpic.php',
type: 'POST',
data: {delpic:delpic},
success:function(data){

}
})
evt.item.parentNode.parentNode.parentNode.removeChild(evt.item.parentNode.parentNode);
var sorts = '';
jQuery('#kuang li').each(function(index, el) {
sorts += ','+jQuery(this).attr('data-id');
});
var id = jQuery('.pid').val();
jQuery.ajax({
url: './source/blog/delsorts.php',
type: 'POST',
dataType: 'json',
data: {newsort: sorts,id:id},
success:function(data){

}

})
jQuery('.cover').hide('1000');
var timer = setTimeout('window.location.reload()',3000);

});

},
store: {

get: function (sortable) {
var order = localStorage.getItem(sortable.options.group);
// return order ? order.split('|') : [];
},
set: function (sortable) {
var order = sortable.toArray();
localStorage.setItem(sortable.options.group, order.join('|'));
var id = jQuery('.pid').val();
jQuery.ajax({
url: './source/blog/changesorts.php',
type: 'POST',
dataType: 'json',
data: {newsort: order,id:id},
})

}
},
onUpdate: function(evt){
var item = evt.item;
}

})
sort.destroy();
下面是html代码

<ul data-role="listview" data-inset="true" id="kuang">
<!--{loop $piclist $v}-->
<li class="bar" data-id="$v['picid']" style="position:relative;">
<div class="move" style="overflow:hidden;">
<div style="width: 875px;" class="leftside">
<a href="http://bbs.photofans.cn/blog.php?mod=edit_mob&picid=$v['picid']" data-ajax="false">
<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">
</a>
<div id="infor" style="font-size:12px;float:left;margin-left:10px;height:50px;width:20%;white-space:pre-wrap;">
<div class="infor_up" style="position:absolute;top:0px;height:15px;overflow:hidden;">$v['txt1']</div>
<div class="infor_down" style="position:absolute;bottom:0px;height:15px;overflow:hidden;">$v['txt2']</div>
</div>
<input name="picid" class="picid" value="$v['picid']" type="hidden">

</div>
</div>
<div class="button_scroll">
<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>
<span class="del_bar icon iconfont"></span>
<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>
</div>
</li>
<!--{/loop}-->
</ul>
因为页面中用到了jquery mobile框架，所以排序的列表我用的是listview。

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

好了就到这里。