jQuery拖拽排序插件HTML5 Sortable的使用示例

1.加载JS库

<script type="text/javascript" src="./js/JQuery/jquery.sortable.js"></script>

2.定义排序样式

<link rel="stylesheet" type="text/css" href="./css/sort_style.css">

3.定义可拖动控件（实验证明 draggable="true" 属性是否添加不影响实际效果）

<ul id="ce" class="gbin1-list">
<li draggable="true"><span>集团</span></li>
<li draggable="true"><span>河北</span></li>
<li draggable="true"><span>安徽</span></li>
</ul>

4.绑定事件

$('.gbin1-list').sortable().bind('sortupdate', function() {

});

5.保存排序结果

　　<input type="button" id="qbtn" value=" 确认修改排序 " onclick="aaa();">


　function aaa(){
　　var count = $("#ce li").size();
　　var tmp="";
　　for (var i=0;i<count ;i++ )
　　{
　　　　var aaa =$("#ce li:eq("+i+")").contents().html();
　　　　tmp=tmp+i.toString()+","+aaa+"-";
　　}
　　$.ajax({
　　　　type: "POST",
　　　　url: "deptManage_sort.action",
　　　　data: "deptid="+deptid+"&deptsort="+tmp,
　　　　success: function(){
　　　　　　$.messager.alert("操作提示","修改成功！","info");
　　　　　　// parent.location.reload();
　　　　　　parent.$("#deptTree").tree("reload");
　　　　}
　　});
}