如何使用jQueryUIDragable和Dropable交换元素？

我有两个箱子。两个容器都有div.item。使用jQuery，如何通过拖放交换div.item元素？这两个元素都应该能够重新交换

有什么简单的方法可以做到这一点吗

---

谢谢…

好的，我得到了脏的解决方案

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

希望，有人能改进这一点……：）

---

Chee…

我在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;
};

@艾貌

我从你的脏溶液中得到了平滑的溶液

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

});

---

也许有点晚，但我认为这是一个更好的解决方案。。。如果其他人认为这有用，将发布文档/搜索目的

注意：您还需要在UI构建中加载jQueryUI的Position元素，以使此解决方案正常工作

在我的示例中，我创建了一组可拖动的“优惠券”，可以放置在不同的位置。在给定的时间内，只有一张优惠券可以放在任何可放下的区域

为了管理可拖放区域的优惠券分配，我创建了一些辅助对象，用于扩展可拖放原型的选项对象：

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

然后（在DOM就绪时）扩展：

最后，设置您的拖放功能。。。当您设置Dropable时，使用jquery UI的位置助手来帮助交换DragTables

$('.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动画调用处理的）

---

我最初在dragstart/dragstop上使用了.trigger（），但它们没有像我想象的那样触发丢弃事件。

也许我遗漏了什么，但我认为我有一个更简单的解决方案：

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

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

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

简言之：

在可拖放区域中拖放可拖放项时，获取可拖放项的（上一个）父元素

从可拖放区域移除子元素，并将其附加到可拖放项的父元素

从父元素（上一个）中删除可拖放项，并将其附加到可拖放区域中

此时，可拖动项的位置会有点奇怪，因为我们已经从页面中删除了元素并重新添加了它们，所以请重置其位置

---

//由ubaidullah chan编写并验证了

这一功能，但不幸的是，它允许重复输入。如果将其与src[0]（如果不为null）进行比较，则可以防止问题发生。

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

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

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

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