锋利的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="./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>