Javascript Drag & Drop-Tabelle Zeilen

Question

Dies ist meine Tabelle, die dynamisch ist, mit diesem ich bekomme drei Tabellen mit verschiedenen 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 as $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>"; 
?> 

Mein Javascript ist dies:

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

} 

wenn Tabellenzeilen von einem Tisch zum anderen fallen .. tr fallen gelassen wurde nicht in der Tabelle td.

wie diese

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

Answer 1

Ihre drop Funktion anhängt, ein Kind zu ev.target. Verwenden Sie console.log, um die tagName für ev.target zu überprüfen. Wenn es TD ist, dann ist das dein Problem.

Nicht im Kommentarbereich, da ich nicht genug Ruf für die Übermittlung von Kommentaren haben.