Jquery可排序'更改'事件元素位置

Question

有没有办法让助手的当前位置被拖到新位置？

$("#sortable").sortable({
        start: function (event, ui) {
            var currPos1 = ui.item.index();
        },
        change:  function (event, ui) {
            var currPos2 = ui.item.index();
        }
});

当实际变化发生时,似乎currPos1和currPos2具有相同的值!

我需要实现的是向用户突出显示"开始拖动元素"与"当前替换元素"之间的所有位置.一旦用户释放鼠标按钮更新发生,只有这时我才能获得新的位置,但是在鼠标释放之前我需要它.

Answer 1

更新时间:2016 ^{年8月26日使用最新的jquery和jquery ui版本以及bootstrap来设计它.}

• 演示: http ://so.lucafilosofi.com/jquery-sortable-change-event-element-position/

$(function() {
    $('#sortable').sortable({
        start: function(event, ui) {
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        },
        change: function(event, ui) {
            var start_pos = ui.item.data('start_pos');
            var index = ui.placeholder.index();
            if (start_pos < index) {
                $('#sortable li:nth-child(' + index + ')').addClass('highlights');
            } else {
                $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
            }
        },
        update: function(event, ui) {
            $('#sortable li').removeClass('highlights');
        }
    });
});

Answer 2

这对我有用:

start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
update: function (event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        //$('#sortable li').removeClass('highlights');
    }