0

DIV から、および DIV への要素の削除、添付、追加などの方法について、Web で多くの情報を見つけました。残念ながら、私はそれを機能させるのに苦労しています。

私のプロジェクトでは、要素を div にアタッチし、それらをグリッド上で移動する必要があります (各グリッド セルは独自の div です) ベローは、私がやろうとしていることを模倣する小さなスクリプトです。

以下に例を示します (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 を移動したい) を 2 行目 (LeftAndRightRwo2) に交換したいとします。

さまざまなことを試しましたが、うまくいきませんでした...私の最後の試み：

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

等

私が試したことはどれもうまくいきませんでした。

divをある場所から別の場所に移動する方法を誰かが理解するのを手伝ってくれますか?

ありがとうございました

4

3 に答える 3