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