首页 > 代码库 > 锋利的jQuery-7--query ui效果库--拖动排序插件sortable

锋利的jQuery-7--query ui效果库--拖动排序插件sortable

2024-07-31 05:40:07   223人阅读

一个简单的拖动排序效果，具体请参看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


联系
我们