title: Drag and Drop of HTML elements
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        
         function dragStart(event){                                    
                      event.dataTransfer.setData("text", event.target.id);                 
                                  }
        function dragOver(event){         
             event.preventDefault();
            dragStart(event1);
                    drop(event1);  
        }    
      function drop(event){
          event.preventDefault();
      var data = event.dataTransfer.getData("text");
      event.target.appendChild(document.getElementById(data));
             }
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
      
      .allsections section{width:18%;
     border: 1px solid black;  
     display:inline-block; 
     margin:5px;
      text-align: center;
     vertical-align:middle;
     overflow:auto;
      }
  .rowodd{background-color:cornflowerblue;
      padding:5px;
  }
  .rowodd:hover{background-color:lightblue;}
  .roweven{background-color:cornsilk;
      padding:5px;
  }
  .roweven:hover{background-color:burlywood;}    
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;section class="allsections"&gt;
    &lt;section draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)" ondrop="drop(event)" class="rowodd" id ="s1"&gt;first element&lt;/section&gt;
    &lt;section draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)" ondrop="drop(event)" class="roweven" id ="s2"&gt;second element 
  &lt;/section&gt;
  &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to exchange the position of two HTML elements(div) using drag and drop functions in javascript? I mean when first div element is dropped over the second element then second div element automatically should come to the position of the first element</p>