首页 > 代码库 > 锋利的jQuery-7--query ui效果库--拖动排序插件sortable
锋利的jQuery-7--query ui效果库--拖动排序插件sortable
一个简单的拖动排序效果,具体请参看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="http://www.mamicode.com/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/ui.core.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/ui.sortable.js"></script>
当把jQuery版本改为1.11.*时,浏览器报错找不到$.browser , $.ui 等,高版本的只需导入:
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/jui/jquery-ui.min.js"></script>
锋利的jQuery-7--query ui效果库--拖动排序插件sortable
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。