Включение сортировки в jQuery UI Sortable со связанными списками - PullRequest
Новая
       14

Включение сортировки в jQuery UI Sortable со связанными списками

1 голос
/ 06 февраля 2012

У меня есть два <ul> списка, связанных с jQuery UI Sortable .

Мне нужно, чтобы элементы перетаскивались из одного списка в другой и использовали connectWith: "ul", как показано ниже: 

$("ul.droptrue").sortable({
   connectWith: "ul",
   receive: function (event, ui) {
   ...

Это срабатывает абсолютно нормально и работает как положено.

Как я могу прослушивать переупорядочения событий в самих отдельных списках?

Я пытался использовать sort: function (event, ui), но, похоже, он слушает все движения.

Если бы кто-нибудь мог предложить лучший способ добиться этого, я был бы признателен.

Вот мои списки 

<ul id="otpages1" class='droptrue'>
<li id="item-1" class="ui-state-default">Item 1</li>
<li id="item-1" class="ui-state-default">Item 2</li>
</ul>
<ul id="otpages2" class='droptrue'>
<li id="item-2" class="ui-state-highlight">Item 1</li>
<li id="item-2" class="ui-state-highlight">Item 2</li>
</ul>

Ответы [ 2 ]

2 голосов
/ 07 февраля 2012

В итоге я решил это так: 

$(function () {
    var oldList, newList, item;
    $('ul.droptrue').sortable({
        start: function (event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function (event, ui) {

        // perform action here

        },
        change: function (event, ui) {
            if (ui.sender) newList = ui.placeholder.parent();
        },
        connectWith: ".droptrue"
    }).disableSelection();
0 голосов
/ 20 мая 2014

Вы можете использовать событие update для сортируемого , которое, как описано в документации API JQuery UI , содержит значение null для атрибута senderкогда сортировка происходит в том же списке. 

$("#sortable").sortable({
    update : function(e, ui) {
        if (ui.sender == null && ui.item.parent().is($(this))) {
            // Items were sorted within the same list
            // Do something here...
        }
    }
});
...