title: Javascript - Swapping div positions
body: <p>Say I've got something like</p>
  
  <pre><code>   &lt;div id="left"&gt;
            &lt;div id="1"&gt;&lt;/div&gt;
            &lt;div id="2"&gt;&lt;/div&gt;
            &lt;div id="3"&gt;&lt;/div&gt;
            &lt;div id="4"&gt;&lt;/div&gt;
            &lt;div id="5"&gt;&lt;/div&gt;
            &lt;div id="6"&gt;&lt;/div&gt;
            &lt;div id="7"&gt;&lt;/div&gt;
            &lt;div id="8"&gt;&lt;/div&gt;
            &lt;div id="9"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="right"&gt;
            &lt;div id="r1"&gt;&lt;/div&gt;
            &lt;div id="r2"&gt;&lt;/div&gt;
            &lt;div id="r3"&gt;&lt;/div&gt;
            &lt;div id="r4"&gt;&lt;/div&gt;
            &lt;div id="r5"&gt;&lt;/div&gt;
            &lt;div id="r6"&gt;&lt;/div&gt;
            &lt;div id="r7"&gt;&lt;/div&gt;
            &lt;div id="r8"&gt;&lt;/div&gt;
            &lt;div id="r9"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>For the <code>left</code> and <code>right</code> div I've used css sprite to display an image. </p>
  
  <p>For example, the <code>left</code> div might look something like this</p>
  
  <p><a href="https://i.stack.imgur.com/PyrZV.png" rel="nofollow noreferrer">Photo</a></p>
  
  <p>I want to be able to swap a child div from the <code>left</code> with a child div from the <code>right</code> and vice versa, or at least the image that divs contain. For example <code>1</code> and <code>r1</code></p>
  
  <p>I tried something like:</p>
  
  <pre><code>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);
          }
      }
  }
  </code></pre>
  
  <p>But it doesn't work swapping a div from <code>left</code> with one from <code>right</code> . Only ones that are within same div. For example <code>1</code> with <code>2</code> works, but <code>r1</code> with <code>1</code> doesn't.</p>
  
  <p>Hope I've made myself clear. Any help would be greatly appreciated.</p>
  
  <p><strong>Later edit; adding more code as requested:</strong></p>
  
  <p>Basically all div's within <code>left</code> and <code>right</code> have <code>onclick="select((divs id))"</code></p>
  
  <p>And the functions looks something like this</p>
  
  <pre><code>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;
      } 
  
  }
  </code></pre>
  
  <p>That <code>selected</code> set attribute is for </p>
  
  <pre><code>  .selected {
              transform: scale(0.95, 0.95);
          }
  </code></pre>