Question

说我有点像

   <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可能看起来像这样

Photo

我希望能够将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);
        }
    }
}

但它不会将left的div与来自right的div交换。只有同一个div内的那些。例如，1 2有效，r1有1但

希望我已经清楚了。任何帮助将不胜感激。

稍后编辑;根据要求添加更多代码：

基本上left和right中的所有div都有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);
        }

Answer 1

使用insertBefore的方法基本上是正确的方法。

以下是一个使用insertBefore

的工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript - 交换div位置

1 个答案: