javascript - Content switch in drag and drop using HTML5 -

i have drag , drop code need switch content in drag , drop. when drop tr on tr append new tr want these 2 tr should change position instead of append it. not interested in plugin , if can done using jquery gr8. html code:

<table>     <tr>         <td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowdrop(event)">             dummy text1         </td>     </tr>     <tr>         <td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowdrop(event)">             dummy text2                 </td>     </tr>     <tr>         <td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowdrop(event)">             dummy text3                 </td>     </tr>     <tr>         <td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowdrop(event)">             dummy text4                 </td>     </tr> </table> 

javascript:

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)); } 

css:

td {     width:500px;     height:80px;     border:1px solid #000;     margin-bottom:5px;     padding:8px;     cursor:default; } 

you can change drop function use classes tr in table class="trdrop"

function drop(ev) { ev.preventdefault(); var data=ev.datatransfer.getdata("text"); var obj=document.getelementbyid(data); var dropposx=ev.clientx; var dropposy=ev.clienty; $("table").find('.trdrop').each(function(){ var tabletr=$(this); var posx=tabletr.offset().left; var posy=tabletr.offset().top; var width=posx+tabletr.width; var height=posy+tabletr.height; // main trick if(dragposx>posx && dragposx<width && dragposy>posy && dragposy<height) { obj.insertafter(tabletr); } }) }