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;
        }
    });
});