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
Post a Comment