Как поменять элемент с помощью jQuery UI, перетаскиваемого и сбрасываемого?

Question

У меня есть два div.containers. Оба контейнера имеют div.item. С помощью jQuery, как я могу поменять элементы div.item перетаскиванием? Оба элемента должны снова поменяться местами.

Есть ли простой способ сделать это?

Спасибо ...

Answer 1

@ Эй Маунг ..

Я получил гладкое решение от твоего грязного раствора ..

$(document).ready(function () {
    src = null;
    options = {
        revert:true,
        /*axis: 'x',*/
        opacity: 0.8,
        start: function() {
                src = $(this).parent();
        }
    };

    $(".item").draggable(options);
    $(".container").droppable({
        drop: function(event, ui) {
                src.append(
                        $('.item', this).remove().clone()
                        .removeClass().addClass("item")
                        .css({"left": '', "opacity": '',"top":''})
                        .draggable(options)
                );

                $(this).append(
                        ui.draggable.remove().clone()
                        .removeClass().addClass("item")
                        .css({"left": '', "opacity": '',"top":''})
                        .draggable(options)
                );
        }
    });

});

Answer 2

Может быть, я что-то упустил, но я думаю, что у меня есть более простое решение:

$('.droppable').droppable({
    drop: function (event, ui) {
        ui.draggable.parent().append($(this).children());

        $(this).append(ui.draggable);

        ui.draggable.css({
            left: '',
            top: ''
        });
    }
});

В двух словах:

1. Когда перетаскиваемый элемент опускается в область сбрасывания, возьмите (предыдущий) родительский элемент перетаскиваемого элемента.
2. Удалите дочерние элементы из области отбрасывания и добавьте их к родительскому элементу перетаскиваемого элемента.
3. Удалите перетаскиваемый элемент из его (предыдущего) родительского элемента и добавьте его в область сбрасывания, где он был отброшен.
4. Позиция перетаскиваемого элемента в этот момент будет странной, поскольку мы удалили элементы со страницы и добавили их заново, поэтому сбросьте их положение.

Answer 3

Возможно, немного поздно, но я думаю, что это лучшее решение ... Будет публиковаться для документации / поиска, если другие люди сочтут это полезным

Примечание: вам также нужен элемент Position jQuery UI, загруженный в вашу сборку UI, чтобы это решение работало.

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

Чтобы управлять назначением купона для областей сбрасывания, я создал несколько вспомогательных объектов, которые я буду использовать для расширения объекта параметров перетаскиваемых и сбрасываемых прототипов:

var dropObj = { hasCoupon: false, couponId: null }
var couponObj = { dropId: null }

Затем (при готовности DOM) расширить:

$.extend( $.ui.droppable.prototype.options, dropObj );
$.extend( $.ui.draggable.prototype.options, couponObj );

Наконец, настройте свои draggables и droppables ... Когда вы настраиваете droppable, используйте jquery UI позиционный помощник, чтобы помочь поменять местами draggables ...

$('.selector').droppable({
    drop: function( event, ui ) {   
        var current, swapId;
        if ( $(this).droppable('option', 'hasCoupon') === false ) {
            // ...
        } else {
            current = $(this).droppable('option', 'couponId');
            swapId = ui.draggable.draggable('option', 'dropId');
            if ( swapId !== null ){
                current.position({ 
                    my: "center", at: "center", of: swapId,
                    using: function(to) {
                        $(this).animate({
                            top: to.top,
                            left: to.left
                        }, ui.draggable.revertDuration, function() {
                            swapId.droppable('option', 'hasCoupon', true);
                            swapId.droppable('option', 'couponId', current);
                            current.draggable('option', 'dropId', swapId);
                        });
                    }
                });
            }
        }
        $(this).droppable('option', 'hasCoupon', true);
        $(this).droppable('option', 'couponId', ui.draggable);
        ui.draggable.draggable('option', 'dropId', $(this));
        ui.draggable.position({ my: "center", at: "center", of: $(this),
            using: function(to) { $(this).animate({ top: to.top, left: to.left }, 150 ); }
        });
    }
});

Примечание. Мы вручную устанавливаем значения для couponId / dropId в обратном вызове анимации для свопа, поскольку события перетаскивания фактически не запускаются в этой ситуации (вместо этого движение обрабатывается посредством вызова анимации jquery).

Я поэкспериментировал с использованием .trigger () первоначально для dragstart / dragstop, но они не вызывали событие drop, как я и предполагал.

Answer 4

    $(function () {
        $('#sortable').sortable({
            start: function (e, ui) {
                // creates a temporary attribute on the element with the old index
                $(this).attr('data-previndex', ui.item.index());
            },
            update: function (e, ui) {
                // gets the new and old index then removes the temporary attribute
                newIndex = ui.item.index();
                oldIndex = $(this).attr('data-previndex');
                $(this).removeAttr('data-previndex');
                tempNew = newIndex - 1;
                tempoldIndex = oldIndex;
                if (oldIndex > newIndex) {
                    tempNew = newIndex + 1;
                    $("#sortable li:eq(" + tempNew + ")").insertAfter($("#sortable li:eq(" + tempoldIndex + ")"));
                } else {
                    $("#sortable li:eq(" + tempNew + ")").insertBefore($("#sortable li:eq(" + tempoldIndex + ")"));
                }
            }
        });
    });

// закодировано Убайдуллой Чаном и проверено

Answer 5

ОК, я получил грязный раствор ...

$(document).ready(function () {
    src = null;
    options = {
        revert:true,
        axis: 'x',
        opacity: 0.8,
        start: function() {
            src = $(this).parent();
        }
    };

    $(".item").draggable(options);
    $(".container").droppable({
        drop: function(event, ui) {
            src.append(
                $('.item', this).remove().clone()
                .removeClass().addClass("item")
                .css({"left": '', "opacity": ''})
                .draggable(options)
            );

            $(this).append(
                ui.draggable.remove().clone()
                .removeClass().addClass("item")
                .css({"left": '', "opacity": ''})
                .draggable(options)
            );
        }
    });
});

Надеюсь, кто-то может улучшить это ...:)

Cheer ...

Answer 6

Я нашел это решение в pengoworks:

jQuery.fn.swap = function(b) {
    b = jQuery(b)[0];
    var a = this[0];
    var t = a.parentNode.insertBefore(document.createTextNode(''), a);
    b.parentNode.insertBefore(a, b);
    t.parentNode.insertBefore(b, t);
    t.parentNode.removeChild(t);
    return this;
};