Question

我已经搜索过这个问题，但还没找到。如果我错了，请纠正我。如果这个问题得到解答，希望我可以帮助更多的人。

我先解释一下情况：

HTML

<div id="p1" class="base"> <!-- this is a box --> 
<div class="card">1</div>  <!-- this is a dynamically created div -->

</div>
<div id="p2" class="base">
<div class="card" style="background-color: green">2</div>

</div>

我有多个盒子，就像一个droppable。单击某个框时，将创建一个div并将其附加到该框，并且div是一个可拖动的。

我已经想出如何在多个框之间拖动div。这是问题所在：

如果每个框都有一个div放入其中，我希望能够在框之间交换div并将它们附加到框新框中。

例如： box 1有div 1，box 2有div 2.我想交换它们，所以box 1有div 2，box 2有div 1作为孩子附加到它们。

我还做了一个例子，大致展示了我目前的代码： http://jsfiddle.net/h7ySb/

$(".card").draggable({
 revert: true,
 zIndex: 10,
 snap: ".base",
 snapMode: "inner",
 snapTolerance: 40,

 start: function (event, ui) {
    lastPlace = $(this).parent();
 }

});

$(".base").droppable({
 drop: function (event, ui) {

    ui.draggable.detach().appendTo($(this));

    var dropped = ui.draggable;
    var droppedOn = this;

    if ($(droppedOn).children().length > 0) {
        $(droppedOn).children().detach().appendTo($(lastPlace));
    }

}
});

this question看起来有点像我想要的，但它并没有将draggable追加到新的droppable。

Answer 1

我自己找到了答案。

你可以在这里找到它：

http://jsfiddle.net/Colinch/h7ySb/6/

如果使用动态创建的正在交换的div，则需要稍微更改一下代码。

创建动态创建的div时：

element.draggable({
            revert: true,
            zIndex: 10,
            snap: ".base",
            snapMode: "inner",
            snapTolerance: 40,
});

并且您必须将droppable的代码放在创建div的函数之外：

$(".base").droppable({
            drop: function (event, ui) {
                var dropped = ui.draggable;
                var droppedOn = this;
                lastPlace = dropped.parent().attr("id");

                if ($(droppedOn).children().length > 0) {

                    $(droppedOn).find(".card").detach().appendTo($("#"+lastPlace));

                }

                $(dropped).detach().css({
                    top: 0,
                    left: 0
                }).appendTo($(droppedOn));


            }

        });

我应该感谢另一个问题的人（请参阅我的第一篇文章中的链接）以获取一些代码。希望我可以帮助这个人。

交换后追加可拖放的dropraable

1 个答案: