jQuery UI如何在不同的div元素中交换元素？

Question

我要做的是在不同的

元素中交换元素。下面是我的代码：JSfiddle 每个

只能拖放一个元素。如果drop_ div有一个已经拖放的元素，而且可拖放的元素是从#tire_deck拖放的，那么它必须被拒绝。如果元素从其他

中拖放，则需要进行交换。有人可以帮我实现这个功能吗？

- DeividasJJ

Answer 1

我的做法是，在拖动开始时存储可拖动父元素，然后使用它来确定是否交换子元素或停止操作。

这是代码示例：

http://jsfiddle.net/vvn5S/

以下是javascript代码：

        $(function () {
            var origin;
            $(".tire").draggable({
                appendTo: "body",
                cursor: "move",
                helper: 'clone',
                revert: "invalid",
                start: function (event, ui) {
                    origin = event.target.parentNode;
                }
            });
            $("#tire_deck").droppable({
                tolerance: "intersect",
                accept: ".tire",
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    $("#tire_deck").append($(ui.draggable));
                }
            });
            $(".drop_1, .drop_2, .drop_3, .drop_4, .drop_5, .drop_6").droppable({
                tolerance: "intersect",
                accept: ".tire",
                drop: function (event, ui) {
                    if (this.children.length == 0) {
                        $(this).append($(ui.draggable));
                    } else {
                        if (origin.id !== "tire_deck") {
                            event.stopPropagation();
                            var copyNode = $(this).children().detach();
                            $(this).append($(ui.draggable));
                            $(origin).append(copyNode);
                        } else {
                            alert("Stopped!");
                        }
                    }
                }
            });
        });

- Py.

Answer 2

我找到了实现我所需结果的方法：JSFiddle，或许对其他人也有用。

在可拖动事件中，我添加了start事件以获取它的原始父级ID：

            var parent_div_data;                        
            $(".tire").draggable({
                appendTo: "body",
                cursor: "move",
                helper: 'clone',
                revert: "invalid",
                start: function( event, ui ) {
                    parent_div_data = $(this).parent().attr("id");
                }
            });

然后在可放置的drop事件中，我检查了它有多少个可拖动元素，并将第一个元素附加到第二个元素的父级div中。

if($(this).find(".tire").length == 1){
                    var first = $(this).find(':first-child');
                    $('#' + parent_div_data).append(first);
                }

- DeividasJJ