jQuery сортируемый получить 2 элемента, которые меняются местами

Question

Я не могу узнать, как получить целевой элемент с сортируемым пользовательским интерфейсом jQuery.

    $("#pages").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var first = ui.item; // First element to swap
            var second = ???? // Second element to swap
            swapOnServer(first, second);
        }
    });

Все варианты, которые я пробовал, указывают на перетаскиваемый элемент, но не тот, с которым он был заменен: ui.item[0], event.srcElement, event.toElement.

Кроме того, this указывает на элемент LIST (OL).

Говоря секунда Я имею в виду следующее:

Оригинальный заказ:

|0 | 1 |2 | 3 |

Перетаскиваем элемент 1 и опускаем его в положение 3. В результате получим:

|0 | 3 |2 | 1 |

Итак, первый элемент равен 1, а второй - 3 (НЕПРАВИЛЬНО! См. Ниже).

ОБНОВЛЕНИЕ: Я понял, чтоЯ ошибся. Новый порядок в этом случае будет.

|0 |2 |3 | 1 |

В результате мой вопрос на самом деле не имеет смысла.Спасибо всем за помощь.Я отмечу голосование и отмечу ответ.

Таким образом, вопрос заключается в том, как получить второй элемент здесь?

---

ТЕКУЩИЙ ВРЕМЕННЫЙ РЕШЕНИЕ (так как нет термина как замена в сортируемом) ниже.Использует временный массив с заказами.

    var prevPagesOrder = [];
    $("#pages").sortable({
        start: function(event, ui) {
            prevPagesOrder = $(this).sortable('toArray');
        },
        update: function(event, ui) {
            var currentOrder = $(this).sortable('toArray');
            var first = ui.item[0].id;
            var second = currentOrder[prevPagesOrder.indexOf(first)];
            swapOnServer(first, second);
        }
    });

Спасибо,
Дмитрий.

Answer 1

Вы можете использовать draggable и droppable вместо sortable для достижения сменного эффекта. На практике это будет выглядеть так:

(function() {
    var droppableParent;

    $('ul .element').draggable({
        revert: 'invalid',
        revertDuration: 200,
        start: function () {
            droppableParent = $(this).parent();

            $(this).addClass('being-dragged');
        },
        stop: function () {
            $(this).removeClass('being-dragged');
        }
    });

    $('ul li').droppable({
        hoverClass: 'drop-hover',
        drop: function (event, ui) {
            var draggable = $(ui.draggable[0]),
                draggableOffset = draggable.offset(),
                container = $(event.target),
                containerOffset = container.offset();

            $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200);

            draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200);
        }
    });
} ());

Демо, http://jsfiddle.net/FZ42C/1/.

Answer 2

взгляните на плагин jQuery «Swapable»:

http://plugins.jquery.com/project/Swapable

Это похоже на «Сортируемый», но затрагиваются только два элемента выбранной группы: перетаскиваемый элемент и отбрасываемый, который заменяется Все остальные элементы остаются на своих текущих позициях. Этот плагин построен на основе существующего «сортируемого» плагина jQuery и наследует все сортируемые параметры.

Answer 3

Попробуйте использовать функцию serialize , которая дает вам хэш списка элементов по порядку.

Если вам просто нужен предмет, который новый предмет упал, прежде чем вы сможете сделать это:

$("#pages").sortable({
    opacity: 0.6,
    update: function(event, ui) {
        var first = ui.item; // First element to swap
        var second = ui.item.prev();
        swapOnServer(first, second);
    }
});

секунда будет нулевой, если она находится в начале списка.

Answer 4

На самом деле «второго» предмета не существует. У вас есть предмет, и вы просто помещаете его в другое место. Предметы вокруг него соответственно корректируют свои позиции. Если вы хотите получить массив всех элементов, вы можете использовать метод toArray .

Answer 5

Вы можете использовать http://plugins.jquery.com/project/Swapable

но это не слишком хороший плагин