0

2 つの HTML 要素を交換しようとしていますが、元の ID を保持する必要があります。
私はテーブルを取得し、各セルには ID = "ixjcell" があり、各セルには一致する ID "ixj" ("cell" 部分なし) を持つ子 div があります。
私の考えは、最初に要素を交換してから、ID を元に戻すということです...単純に聞こえますが、何らかの理由で機能させることはできません。次のコード (ここから入手したもの) を使用して、2 つの要素を交換しました

function swapElementsObj(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");

    obj1.parentNode.insertBefore(temp, obj1);
    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);

    var obj1ID = obj1.getAttribute('id');
    var obj2ID = obj2.getAttribute('id');
    var obj1Childid = obj1ID.replace('cell', '');
    var obj2Childid = obj2ID.replace('cell', '');
    var obj1Child = document.getElementById(obj1Childid);
    var obj2Child = document.getElementById(obj2Childid);

    document.getElementById(obj2Childid).setAttribute('id', obj1Childid);
    document.getElementById(obj1Childid).setAttribute('id', obj2Childid);


    obj1.setAttribute('id', obj2.getAttribute('id'));
    obj2.setAttribute('id', obj1ID);
}

これはボード ゲームであり、ボードの 1 つを回転させる必要があるため、転置 + 列/行の反転を使用し、その作業を行っています... 問題は、ID が混同されており、回転が正しく機能していないことです。
要素が入れ替わる！ボード上のポーンが正しくスワップされているのが見えますが、ID のバックをスワップすると何かが磨耗しており、正しく取得できません。
JQueryを使用できません。前もって感謝します！

要素は次のようになります。

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>

これは小さな例です:

前 後

編集:(詳細):
ポーン (黒/白) をドラッグしてドロップするボードがあります - ドロップすると、ポーンは class = droparea の div に子として追加されます。
次に、回転する必要があります。回転するときは、ポーンを適切な場所に移動する必要があります。上の例では、ポーンは正方形 1x1 にあり、時計回りに回転すると 1x2 になるため、セル 1x1 の内容を交換する必要があります。そしてセル1x2。

HTMLが望んでいた結果：これから
： 

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false">
</div>
</span>
</td>

<td>
<span class="boardSingleSpot" id="1x2cell">
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>

これに： 

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>   

<td>
<span class="boardSingleSpot" id="1x2cell">
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false">
</div>
</span>
</td>
4

1 に答える 1

1

交換

document.getElementById(obj2Childid).setAttribute('id', obj1Childid);
document.getElementById(obj1Childid).setAttribute('id', obj2Childid);

と

obj2Child.setAttribute('id', obj1Childid);
obj1Child.setAttribute('id', obj2Childid);
于 2013-08-02T14:37:14.613 に答える