0

im trying to swap 2 HTML elements but they need to keep their original IDs.
I got a table and each cell have ID = "ixjcell", and each cell have a child div with matching id "ixj"(without the "cell" part);
My thinking is: first swap the elements, then swap back the IDs... sounds simple but cant get it working for some reason. i used the next code (which i got from here) to swap between 2 elements

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);
}

its a board game and i need to rotate one of the board so im using transpose + reverse columns/row and its working... kind of, the problem is the ID's getting mixed up and then the rotation is not working properly.
the elements do swap! and i see the pawns on the board swapping correctly but something is worng with swapping the ID's back and i cant get it right.
Cant use JQuery. thanks in advance!

the elements look like this:

<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>

this is small example:

before after

edit:(more info):
i have a board which i drag pawns (black/white) to it and drop - the pawn, upon drop is appended as child to the div with class = droparea.
then i have to rotate, when i rotate i have to move the pawn to his proper place, in the example above the pawn is on square 1x1 and after clockwise rotation it will be on 1x2, so i need to swap the content of cell 1x1 and cell 1x2.

HTML wanted result:
from this: 

<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>

to this: 

<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>
Community
  • 1
  • 1
avi.tavdi
  • 305
  • 2
  • 4
  • 17
  • 1
    Why don't you swap the content? – jantimon Aug 02 '13 at 13:24
  • See http://stackoverflow.com/questions/3066427/copy-all-childnodes-to-an-other-element-in-javascript-native-way – jantimon Aug 02 '13 at 13:26
  • @jantimon what do you mean swap the content? i still need to access the table with the IDs i made, I drop other element on the cells and append as child, is there a way to move the child alone between 2 elements? – avi.tavdi Aug 02 '13 at 13:30
  • 1
    If each cell has that ID, then you've fundamentally misused the id attribute. You should use class instead. – jxpx777 Aug 02 '13 at 13:31
  • Could you please provide a before/after example? – jantimon Aug 02 '13 at 13:31
  • @jxpx777 I think he means that the ID is `{i}x{j}cell` where `i` and `j` are the X,Y coordinates in his "grid"... vs. having N elements all with the exact same ID. e.g 4x7cell, 2x3cell, 1x7cell etc. – scunliffe Aug 02 '13 at 13:32
  • @jxpx777 you misunderstood what I wrote, each cell have different ID, please check the element example i gave – avi.tavdi Aug 02 '13 at 13:32
  • @jantimon i will add an example in few minutes – avi.tavdi Aug 02 '13 at 13:33
  • Can we assume that this board game is Chess? (as you mentioned pawns) This will help us grasp what you are trying to do vs. some game we've never seen/known. – scunliffe Aug 02 '13 at 13:35
  • @scunliffe the game is pentago – avi.tavdi Aug 02 '13 at 13:38
  • 1
    You need to go back to the drawing board. There are much easier ways to do the kind of thing you're trying to than such wholesale manipulation of the DOM. Using a table sounds like a bad idea. I'd suggest 64 absolutely positioned elements instead. Then you can swap them by just changing their top and left properties. –  Aug 02 '13 at 13:39
  • Can you please add your HTML of both cells before, the expected result and the current result? This would really help us. – jantimon Aug 02 '13 at 14:01
  • @jantimon i just added more info that in my opinion will clarify my intention – avi.tavdi Aug 02 '13 at 14:11
  • 1h without any answer but tons of comments.. we don't get what you want without seeing the desired html result.. http://sscce.org/ – jantimon Aug 02 '13 at 14:18
  • @jantimon I added the desired result – avi.tavdi Aug 02 '13 at 14:37

1 Answers1

1

Replace

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

with

obj2Child.setAttribute('id', obj1Childid);
obj1Child.setAttribute('id', obj2Childid);
jantimon
  • 36,840
  • 23
  • 122
  • 185
  • This did the job as far as i can see. thanks for you help. Something else i thought is maybe swapping the children of the spans, is it possible and will obtain the same result? – avi.tavdi Aug 02 '13 at 15:13