移动 <div> 从一个 <div> 到另一个来回

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元素，则需要将其存储在变量中。 另外，您应该使用detach而不是remove，因为在这种情况下这样做更有效。

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

Answer 2

当您使用$("#Left").remove()时，实际上是将其从DOM中删除，因此以后无法通过$("#LeftAndRightRow2").append($("#Left"));来调用它$("#LeftAndRightRow2").append($("#Left")); 。

尝试像这样将其保存在变量中：

JS

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

现在整个div从右移到左。

小提琴

http://jsfiddle.net/mgR5b/26/

Answer 3

我认为您的问题更多是CSS，而JS则更少。我已经更改了标记和CSS以获取所需的结果

标记

<div id="LeftAndRightRow1" class="rows">
    <div id="Left">
        <button id="B1">B1</button>
    </div>
    <div id="Right">
        <button id="B2">B2</button>
    </div>
</div>
<div id="LeftAndRightRow2"  class="rows">
    <div id="Left2">
        <button id="B3">B3</button>
    </div>
    <div id="Right2">
        <button id="B4">B4</button>
    </div>
</div>
<br style="clear:both;" />
<button id="SwapButton">Swap Button</button>

JS

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

CSS

.rows{
display:block;
    clear:left;
}
.rows div{
float:left;
}

的jsfiddle