javascript drag and drop table rows -


this table dynamic, getting 3 tables different ids.

<?php echo "<table class='table table-hover table-bordered' ondrop='drop(event,this)' ondragover='allowdrop(event)' id='".$type."'>"; if(empty($players))     echo "<tr><td></td></tr>"; foreach($players $p) {     echo "<tr data-id='".$p['to']."' data-fixture='".$p['fixture']."' data-team='".$p['team']."' draggable='true' ondragstart='drag(event,this)' id='".$type."aa'>";     echo "<td >".$p['name']."</td>";     echo "</tr>"; } echo "</table>"; ?> 

my javascript this:

function allowdrop(ev) {     ev.preventdefault(); }     function drag(ev,str) {       //alert(str);      var temp = str.parentnode;     child = temp.children;     if(child.length==1)     {     $(temp).append("<tr><td></td></tr>");     }      ev.datatransfer.setdata("text", ev.target.id);     ev.datatransfer.setdata("val", ev.target.getattribute('data-id'));     ev.datatransfer.setdata("fixture", ev.target.getattribute('data-fixture'));     ev.datatransfer.setdata("team", ev.target.getattribute('data-team')); }   function drop(ev,str) {     ev.preventdefault();     var data = ev.datatransfer.getdata("text");     var id = ev.datatransfer.getdata("val");     var fixture = ev.datatransfer.getdata("fixture");     var team = ev.datatransfer.getdata("team");     ev.target.appendchild(document.getelementbyid(data));     //alert(fixture);     if(str.id=='avl')         status=1;     else if(str.id=='uavl')         status=2;              $.ajax({        url: "<?php echo base_url();?>index.php/teams/update_players/"+status+"/"+id+"/"+fixture+"/"+team,        type: 'get',        success: function(data) {           //$("#a_p").html(data);           //alert(data);        },         });  }  

when dropping table rows 1 table another.. tr got dropped td not in table.

like this

<table> <tr> <td> <tr> (this dropped row) <td></td> </tr> </td> </tr> </table> 

your drop function appends child ev.target. try using console.log check tagname ev.target. if it's td, that's problem.

not providing in comment section, because don't have enough reputation submitting comments.


Comments