jquery sortable 使用注意事项

<div class=".items">

　　<div class="item"><div class="sort"></div>

　　<div class="item"><div class="sort"></div>

</div>

<style>

　　.items {

        /*
         * 该对象必须设置postion为相对或绝对定位，因为被拖动的对象定位是absolute
         * 如果容器没有positin的话，拖动时对象就会相对于最外层有position的元素来显示位置
         */

　　　　position: relative; 

　　}

</style>

<script>

    Array.prototype.move = function (findex, tindex) {
        this.splice(tindex, 0, this.splice(findex, 1)[0]);
        }

    // 启用拖动排序
    $(‘.items‘).sortable({
        items: ‘.item‘,
        handle: ‘.sort‘,
        axis: ‘y‘, // 限制在Y轴方向拖动
        containment: ‘.items‘, // 限制在.item容器内拖动，一般不用设置，设置了反而会导致拖动时移动不灵活，特别很难把元素拖动到最后一个元素下面，除非容器底部有比较大的间隙可容纳一个元素
        start: (event, ui) => {
            ui.item.attr(‘sort‘, ui.item.index());
        },
        update: (event, ui) => {
            var fSort = ui.item.attr(‘sort‘);
            var tSort = ui.item.index();
            items.move(fSort, tSort);
            for (var i = tSort; i < items.length; i++) {
                items[i].sort = i;
            }
            for (var i = tSort - 1; i > -1; i--) {
                items[i].sort = i;
            }
            ui.item.removeAttr(‘sort‘);
        }
    });

</script>