javascript - 将 从一个 来回移动到另一个

Question

我在网上找到了很多关于如何从 DIV 中删除、附加、添加等元素的信息。不幸的是，我很难让它发挥作用。

在我的元素中，我必须将元素附加到 div 并在网格上四处移动它们(每个网格单元都是它自己的一个 div)Bellow 是一个模仿我正在尝试做的事情的小脚本。

这是示例(这里是 JSFiddle 的链接:http://jsfiddle.net/mgR5b/25/):

HTML:

    <div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
       <div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;">
        <button id="B1">B1</button>
        </div>
        <div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;">
        <button id="B2">B2</button>
        </div>
    </div>
    <div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
        <div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;">
            <button id="B3">B3</button>
        </div>
        <div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;">
            <button id="B4">B4</button>
        </div>
    </div>
   <br>
   <button id="SwapButton">Swap Button</button>

JQuery/JavaScript

现在，假设我想将容器“Left”(我想移动 Div，而不是按钮)交换到第二行 (LeftAndRightRwo2)。

我尝试了各种方法，但没有一个起作用......我最后一次尝试:

$(document).ready(function () {
    $("#SwapButton").click(function () {
        alert('trying to swap');
        $("#Left").remove();
        $("#LeftAndRightRow2").append($("#Left"));
    });
});

等

我试过的都没有用。

有人可以帮助理解如何将 div 从一个地方移动到另一个地方吗？

谢谢

Answer 1

当你移除一个元素时，它就不再存在于 DOM 中。如果你想像那样移动 DOM 元素，你需要将它存储在一个变量中。此外，您应该使用分离而不是删除，因为在这种情况下它更有效。

$(document).ready(function () {
    $("#SwapButton").click(function () {
        var left = $('#Left');
        left.detach();
        $("#LeftAndRightRow2").append(left);
    });
});