jQuery UI Sortable, как определить текущее местоположение и новое местоположение в событии обновления?

У меня есть:

<ul id="sortableList">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
</ul>

Я подключился к update: function(event, ui) { }, но не знаю, как получить исходное и новое положение элемента. Если я перемещаю элемент 3 выше элемента 1, я хочу, чтобы исходная позиция была 2 (индекс на основе 0), а новая позиция элемента 3 была 0.


person Amir    schedule 21.10.2009    source источник
comment
Последний ответ Ричарда с наименьшим количеством голосов — лучшее и самое чистое решение, особенно когда вы используете AngularJS или любую другую среду MVC, где вы не хотите читать настраиваемый атрибут внутри вашего контроллера!   -  person Nishanth Nair    schedule 01.11.2013


Ответы (6)


Когда вызывается функция обновления, ui.item.sortable не обновляется, однако элемент пользовательского интерфейса визуально перемещается.
Это позволяет вам в функции обновления получить старую позицию и новую позицию.

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});
person Richard Friedman    schedule 28.06.2013
comment
Это лучший ответ и самое чистое решение! Спасибо Ричард! - person Nishanth Nair; 01.11.2013
comment
Не работает с jQuery 1.7, jQuery UI 1.8 — хотя это решение звучит очень многообещающе. - person user1702401; 12.11.2013
comment
Чтобы быть конкретным: ui.item.sortable.index не существует; а ui.item.sortable().index() возвращает уже обновленный индекс. - person user1702401; 12.11.2013
comment
Для меня ui.item.sortable.index и ui.item.index() оба возвращали одно и то же целое число. Я начал использовать ui.item.sortable.dropindex для получения нового индекса - person Mudassir Ali; 10.11.2015

У вас есть несколько возможностей проверить старую и новую позицию. Я бы поместил их в массивы.

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

И вы можете легко извлечь то, что вам нужно.

person Frankie    schedule 21.10.2009
comment
элементы списка должны иметь идентификаторы. в противном случае он генерирует пустой массив - person Atara; 23.11.2017

Я искал ответ на тот же вопрос. основываясь на том, что внес Фрэнки, я смог получить как начальный, так и конечный «приказы». У меня была проблема с областью действия переменных с использованием var, поэтому я просто сохранил их как .data() вместо локальных переменных:

$(this).data("old_position",$(this).sortable("toArray"))

а также

$(this).data("new_position",$(this).sortable("toArray"))

теперь вы можете вызвать это так (из функций обновления/завершения):

console.log($(this).data("old_position"))
console.log($(this).data("new_position"))

Кредит по-прежнему принадлежит Фрэнки :)

person jasonmcleod    schedule 16.05.2011

Это сработало для меня

$('#sortable').sortable({
start: function(e, ui) {
    // puts the old positions into array before sorting
    var old_position = ui.item.index();
},
update: function(event, ui) {
    // grabs the new positions now that we've finished sorting
    var new_position = ui.item.index();
}
});
person nicmwenda    schedule 25.11.2014
comment
Это сработало для меня! Стоит отметить, что если вам нужно сослаться на old_position в update(), просто объявите его перед сортируемым. - person nick; 24.04.2015

Это работает для меня,

$('#app').sortable({
    handle: '.handle',

    start: function(evt, ui){
        $(ui.item).data('old-ndex' , ui.item.index());
    },

    update: function(evt, ui) {
        var old_index = $(ui.item).data('old-ndex');
        var new_index = ui.item.index();

        alert('old_index -'+old_index+' new index -'+new_index);

    }
});
person lonestar    schedule 30.03.2016

person    schedule
comment
Вы также можете использовать ui.item.data('previndex') - person adamj; 27.03.2017