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

There’s not really a “second” item per se. You have an item, and you are simply placing it in another location. The items around it adjust their positions accordingly. If you want to get an array of all the items, you can use the toArray method.