Let's say we have the following structure:
<div id="left">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
</div>
<div id="right">
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div id="r4"></div>
<div id="r5"></div>
<div id="r6"></div>
<div id="r7"></div>
<div id="r8"></div>
<div id="r9"></div>
</div>
I have utilized css sprite to display an image for the left and right divs.
For instance, the image for the left div could be like this:
I am trying to swap a child div from the left with a child div from the right, or at least the images within those divs. For example swapping 1 and r1.
I attempted something like this:
function swapElements(obj1, obj2) {
var parent2 = obj2.parentNode;
var next2 = obj2.nextSibling;
if (next2 === obj1) {
parent2.insertBefore(obj1, obj2);
} else {
obj1.parentNode.insertBefore(obj2, obj1);
if (next2) {
parent2.insertBefore(obj1, next2);
} else {
parent2.appendChild(obj1);
}
}
}
However, it only works when swapping divs within the same parent div, not between left and right. Swapping 1 with 2 works, but r1 with 1 does not work.
I hope this explanation is clear. Any assistance would be greatly appreciated.
Later edit; additional code as requested:
All divs within left and right have an attribute onclick="select((divs id))"
The function looks similar to this:
var selected = null;
function select(cellID){
if (selected == null){ //if this is the first time selecting
selected = cellID;
cell = document.getElementById(selected);
cell.setAttribute("class", "selected");
return;
}
if (selected == cellID){ // if selected same cell
document.getElementById(selected).setAttribute("class", "");
selected = null;
return;
}
if (selected){
document.getElementById(selected).setAttribute("class", "");
swapElements(document.getElementById(cellID), document.getElementById(selected));
selected = null;
return;
}
}
The selected attribute is set for
.selected {
transform: scale(0.95, 0.95);
}