[英]Javascript - Swapping div positions
說我有類似的東西
<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>
對於left
和right
div,我使用了css sprite來顯示圖像。
例如, left
div可能看起來像這樣
我希望能夠將left
的子div與right
的子div交換,反之亦然,或者至少將div包含的圖像交換。 例如1
和r1
我嘗試了類似的東西:
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);
}
}
}
但它不工作交換一個div從left
有一個從right
。 僅屬於同一div的那些。 例如,具有2
1
有效,但是具有1
r1
無效。
希望我已經說清楚了。 任何幫助將不勝感激。
以后編輯; 根據要求添加更多代碼:
內基本上所有div的left
和right
都有onclick="select((divs id))"
函數看起來像這樣
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;
}
}
該selected
集合屬性用於
.selected {
transform: scale(0.95, 0.95);
}
從根本上來說,使用insertBefore
方法是正確的方法。
這是一個使用insertBefore
的工作示例:
var leftDiv = document.getElementById('left'); var rightDiv = document.getElementById('right'); var divs = [... document.querySelectorAll('div div')]; function swapDivs() { var divIndex = (parseInt(this.id.substr(-1)) - 1); var leftBefore = rightDiv.getElementsByTagName('div')[divIndex]; var leftAfter = leftDiv.getElementsByTagName('div')[(divIndex + 1)]; leftDiv.insertBefore(leftBefore, leftAfter); var rightBefore = leftDiv.getElementsByTagName('div')[divIndex]; var rightAfter = rightDiv.getElementsByTagName('div')[divIndex]; rightDiv.insertBefore(rightBefore, rightAfter); } divs.forEach(function(div){ div.addEventListener('click', swapDivs, false); });
#left, #right { float: left; width: 180px; background-color: rgb(127, 127, 127); border: 2px solid rgb(0, 0, 0); } div div { height: 24px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); border: 2px solid rgb(255, 255, 255); border-top-width: 1px; border-bottom-width: 1px; } div div:hover { background-color: rgb(163, 0, 0); cursor: pointer; }
<div id="left"> <div id="l1">Left 1</div> <div id="l2">Left 2</div> <div id="l3">Left 3</div> <div id="l4">Left 4</div> <div id="l5">Left 5</div> <div id="l6">Left 6</div> <div id="l7">Left 7</div> <div id="l8">Left 8</div> <div id="l9">Left 9</div> </div> <div id="right"> <div id="r1">Right 1</div> <div id="r2">Right 2</div> <div id="r3">Right 3</div> <div id="r4">Right 4</div> <div id="r5">Right 5</div> <div id="r6">Right 6</div> <div id="r7">Right 7</div> <div id="r8">Right 8</div> <div id="r9">Right 9</div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.