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(even         


        

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.

Answer 2

You can use http://plugins.jquery.com/project/Swapable

but this is not too good plugin

Answer 3

Try using the serialize function which gives you a hash of the list of items in order.

If you just need the item that the new item go dropped before you can do this:

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

second will be null if its at the start of the list.

Answer 4

take a look at the "Swapable" jQuery plugin:

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

It similar to "Sortable", but only two elements of the selected group are affected: dragged element and dropped one which are swapped. All other elements stay at their current positions. This plugin is built based on existing "Sortable" jQuery plugin and inherits all sortable options.

Answer 5

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/.