jQueryUI拖动图片排序

jQuery UI sortable()的功能来实现鼠标静态页拖动排序效果。代码简单容易套用修改，而且图片拖动后的当前顺序也计算了出来，顺序以逗号隔开，可以保存到数据库表字段中。

分类：悬浮层/弹出层 > 拖动难易：入门级

查看演示下载资源下载积分： 20 积分

9个图片

<ul class="sortable" style="display: -webkit-inline-box;">
    <li class="ui-state-default" id="1"><img src="./alex.png"/><p>第1项</p></li>
    <li class="ui-state-default" id="2"><img src="./alex.png"/><p>第2项</p></li>
    <li class="ui-state-default" id="3"><img src="./alex.png"/><p>第3项</p></li>
    <li class="ui-state-default" id="4"><img src="./alex.png"/><p>第4项</p></li>
    <li class="ui-state-default" id="5"><img src="./alex.png"/><p>第5项</p></li>
    <li class="ui-state-default" id="6"><img src="./alex.png"/><p>第6项</p></li>
    <li class="ui-state-default" id="7"><img src="./alex.png"/><p>第7项</p></li>
    <li class="ui-state-default" id="8"><img src="./alex.png"/><p>第8项</p></li>
    <li class="ui-state-default" id="9"><img src="./alex.png"/><p>第9项</p></li>
</ul>

引入jQuery UI sortable排序插件

<script src="jquery-ui.js"></script>

开始拖动

$(function() {
    $(".sortable").sortable({
        cursor: "move",
        items: "li", //只是li可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        revert: true, //释放时，增加动画
        update: function(event, ui) {       //更新排序之后
            var pxid = $(this).sortable("toArray");
            //alert("顺序："+pxid);  //新的顺序
            document.getElementById("pxids").innerHTML = pxid;
        }
    });
});