Javascript-交换div位置

比如说我有

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

但是，将一个div从左移到右是行不通的。只有在同一分区内的分区才能工作。例如，1和2可以工作，但r1和1不能工作

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

后期编辑；根据请求添加更多代码：

基本上，左侧和右侧的所有div都有onclick=selectdivs 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 {
            transform: scale(0.95, 0.95);
        }

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

下面是一个使用insertBefore的工作示例：

var leftDiv=document.getElementById'left'； var rightDiv=document.getElementById'right'； var divs=[…document.queryselectoral'div']； 函数swapDivs{ var divIndex=parseIntthis.id.substr-1-1； var leftBefore=rightDiv.getElementsByTagName'div'[divIndex]； var leftAfter=leftDiv.getElementsByTagName'div'[divIndex+1]； leftDiv.insertBeforeleftBefore，leftAfter； var rightBefore=leftDiv.getElementsByTagName'div'[divIndex]； var righafter=rightDiv.getElementsByTagName'div'[divIndex]； rightDiv.insertBeforerightBefore、RightBefore、rightAfter； } divs.forEachfunctiondiv{ div.addEventListener'click'，swapDivs，false； }; 左，右{ 浮动：左； 宽度：180px； 背景色：rgb127、127、127； 边框：2个实心rgb0,0,0； } div div{ 高度：24px； 文本对齐：居中； 颜色：rgb255、255、255； 背景色：rgb255,0,0； 边框：2个实心rgb255、255、255； 边框顶部宽度：1px； 边框底宽：1px； } div div：悬停{ 背景色：rgb163,0,0； 光标：指针； } 左1 左2 左3 左4 左5 左6 左7 左8 左9 对1 对2 对三 对四 对五 对六 对七 对8 对9

---

请添加更多代码，因为没有人知道何时/如何调用Swaplements…当然，编辑。感谢您的登录，一切如期：您的onclick可能会做一些奇怪的事情吗？@DoeLow-以下是一个帮助您形象化的例子。它似乎起作用了。被MarcelD以43秒击败哇。。。我真的不知道说什么好。我已经仔细检查了所有内容，在我的代码中似乎一切正常，但它仍然无法从左div切换到右div。可能是因为我有图像而不是文字吗？我也不认为是这样，因为如果我尝试从同一个div向左或向右交换，它会起作用。我真的认为我的代码有问题，我不知道为什么。。。真的复制粘贴了div，所以没有更多的onclick和JS，但它仍然无法工作，该死。

  .selected {
            transform: scale(0.95, 0.95);
        }