0

我试图交换 2 个 HTML 元素，但他们需要保留其原始 ID。
我有一个表格，每个单元格都有 ID =“ixjcell”，每个单元格都有一个子 div，其 id 为“ixj”（没有“单元格”部分）；
我的想法是：首先交换元素，然后交换 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);
}

它是一个棋盘游戏，我需要旋转其中一个棋盘，所以我使用转置 + 反向列/行及其工作......有点，问题是 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 回答