2013/12/11 Jquery UI插件 sortable库

来源：互联网发布：王宝强判决结果知乎编辑：程序博客网时间：2024/06/05 05:05

这个sortable组件是一个拖动排序组件，可以通过拖动修改网页显示的列表内容的顺序。

例子代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery UI Sortable</title><style type="text/css">#myList{width: 80px;background: #EEE;padding: 5px;list-style: none;}#myList a{text-decoration: none;color: #0077B0;}#myList a:hover{text-decoration: underline;}#myList .qlink{font-size: 12px;color: #666;margin-left: 10px;}</style></head><script type="text/javascript" src="../../scripts/jquery-1.3.1.js"></script><script type="text/javascript" src="../../scripts/ui.core.js"></script><script type="text/javascript" src="../../scripts/ui.sortable.js"></script><script type="text/javascript">  $(document).ready(function(){$("#myList").sortable(); //直接让myList下的元素可以拖动排序  });</script><body><ul id="myList"><li><a href="#">心情</a></li><li><a href="#">相册</a><a href="#" class="qlink">上传</a></li><li><a href="#">日志</a><a href="#" class="qlink">发表</a></li><li><a href="#">投票</a></li><li><a href="#">分享</a></li><li><a href="#">群组</a></li></ul></body></html>

以上的做法便可以实现列表内容拖动排序，不过在某些特殊的情况下会因为拖动事件抢在点击事件前导致单击事件失效，我们要做一些修改，如果出现这种情况

可以设置参数delay延时1毫秒。

$("#myList").sortable({delay:1}); //修复潜在链接点击问题

拖动排列之后，可以通过与后台结合保存下用户的个性化排序，首先要与后台打交道就需要用到回调函数，sortable的回调函数为stop

$("#myList").sortable({delay:1,//修复潜在链接点击问题stop:function() {alert("触发排序停止后回调函数");}});

然后通过回调函数将用户排好的序列发送到后台，要获取排好的顺序，需要用到一个函数sortable('serialize')

$("#myList").sortable({delay:1,//修复潜在链接点击问题stop:function() {$.post("sortable.php",$('#myList').sortable('serialize'),//要发送的数据function(response) {alert(response);});}});

对了，要通过函数sortable('serialize')获取排列，对排列的ID命名有要求

<ul id="myList"><li id="myList_mood"><a href="#">心情</a></li><li id="myList_photo"><a href="#">相册</a><a href="#" class="qlink">上传</a></li><li id="myList_blog"><a href="#">日志</a><a href="#" class="qlink">发表</a></li><li id="myList_vote"><a href="#">投票</a></li><li id="myList_share"><a href="#">分享</a></li><li id="myList_group"><a href="#">群组</a></li></ul>

0 0