title: Content switch in drag and drop using HTML5
body: <p>I have drag and drop code where i need to switch content in drag and drop. Currently when you drop a tr on another tr it append this new tr but I want these two tr should change their position instead of append it. I am not interested in any plugin and also if it can be done using jquery it would be gr8. 
  HTML code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              Some Dummy Text1
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              Some Dummy Text2        
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              Some Dummy Text3        
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              Some Dummy Text4        
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function allowDrop(ev)
  {
  ev.preventDefault();
  }
  
  function drag(ev)
  {
  ev.dataTransfer.setData("Text",ev.target.id);
  //alert("Id "+ev.target.id+" Being drag");
  }
  
  function drop(ev)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>td
  {
      width:500px;
      height:80px;
      border:1px solid #000;
      margin-bottom:5px;
      padding:8px;
      cursor:default;
  }
  </code></pre>