标签：style blog http io color ar os java sp
一个简单的拖动排序效果，具体请参看jQuery ui官网demo。
jquery ui : http://jqueryui.com/
sortable例子：http://jqueryui.com/sortable/#portlets
效果如图：
html代码：
<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;}
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<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>
js代码：
<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./js/jui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myList").sortable({
delay:1, //拖动事件延迟1ms,防止跟‘点击’发生冲突
stop:function() { //停止拖动时触发的事件，可用于ajax传值
var s = $(‘#myList‘).sortable(‘serialize‘); //获取当前拖动后的顺序,myList[]=blog&myList[]=photo,li对应的id的下划线组成
//alert(s);
},
placeholder: "ui-state-highlight", //拖动时原位置被一个.ui-state-highlight占据
});
$( "#myList" ).disableSelection();
});
</script>
注意：
注意导入的jQuery版本和jQuery.ui版本的匹配问题，锋利的jQuery书中的例子导入：
<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>
当把jQuery版本改为1.11.*时，浏览器报错找不到$.browser , $.ui 等，高版本的只需导入：
<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./js/jui/jquery-ui.min.js"></script>锋利的jQuery-7--query ui效果库--拖动排序插件sortable
标签：style blog http io color ar os java sp
原文地址：http://www.cnblogs.com/leezhxing/p/4074754.html
