title: swapping child elements of div using javascript by drag and drop
body: <p>I tried swapping two elements inside  div1 and div2 tag but only the first replace function executes properly the other element is not swapped</p>
  
  <ul>
  <li><p>either one of the div is getting swapped at once but when i try to swap both at same time it doesn't happen please help me out 
  *</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;style type="text/css"&gt;
          #div1 {
              width:350px;
              height:70px;
              padding:10px;
              border:1px solid #aaaaaa;
          }
          #div2 {
              width:350px;
              height:70px;
              padding:10px;
              border:1px solid #aaaaaa;
          }
      &lt;/style&gt;
      &lt;script&gt;
          function allowDrop(ev) {
              ev.preventDefault();
          }
  
          function drag(ev) {
              var child = ev.target;
              var parents = child.parentNode;
              ev.dataTransfer.setData("child1", child.id);
              ev.dataTransfer.setData("parent1", parents.id);
          }
  
          function drop(ev) {
              ev.preventDefault();
              var childid1 = ev.dataTransfer.getData("child1");
              var parentid1 = ev.dataTransfer.getData("parent1");
              var parent1 = document.getElementById(parentid1);
              var c = ev.currentTarget.childNodes;
              var childid2 = c[1].id;
              parent1.replaceChild(c[1], document.getElementById(childid1));
              var parent2 = ev.currentTarget;
              parent2.removeChild(c[1]);
              parent2.appendChild(document.getElementById(childid1));
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
          &lt;img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
          &lt;img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="236" height="49"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p></li>
  </ul>