javascript - jQuery sortable obtain 2 elements being swapped

Question

I cannot find out how to obtain destination element with jQuery UI sortable.

    $("#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);
        }
    });

All the options I've tried point to the element being dragged, but not the one it is swapped with: ui.item[0], event.srcElement, event.toElement.

Additionally, this points to the LIST (OL) element.

Saying second I mean following:

Original order is:

| 0 | 1 | 2 | 3 |

We drag element 1 and drop it in position 3. Which will end up with:

| 0 | 3 | 2 | 1 |

So the first element is 1 and the second is 3 (WRONG! See below).

UPDATE: I have realised that I got it wrong. The new order in this case will be.

| 0 | 2 | 3 | 1 |

As a result my question does not really makes sense. Thanks everybody for the help. I'll mark vote and mark an answer.

So the question is how to obtain the second element here?

---

THE CURRENT WORKAROUND (as there is no term as swapping in sortable) is below. It uses temporary array with orders.

    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);
        }
    });

Thanks,
Dmitriy.

Answer 1

You can use draggable and droppable instead of sortable to achieve swappable effect. In practise, this will look like this:

(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);
        }
    });
} ());

Demo, http://jsfiddle.net/FZ42C/1/.