JQuery Drag & Drop basierend auf Daten-ID

Question

Ich bin Neuling Drag-and-Drop-Funktionen.

JQuery:

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    var DataId = ev.target.parentNode.getAttribute('data-id'); 
    alert("Data Id : "+DataId); 
    var selected_table =$("#rows .sim-row[data-id='"+DataId+"']"); 
    //var main_table = selected_table.parentNode; 
    alert("Data Id : "+selected_table.html()); 
    ev.dataTransfer.setData("text",selected_table); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    alert("Data Id : "+data.html()); 
    ev.target.appendChild(data.clone()); 
} 

HTML-Code:

<div id="content" ondrop="drop(event)" ondragover="allowDrop(event)"> 
</div> 

<div id="rows"> 
    <table class="sim-row" data-id="1001" id="1001"> 
     <tr> 
      <td class="sim-row-header1 sim-row-edit width100" data-type="title">Main Title</td>       
     </tr> 
    </table> 
</div> 

<div class="buttons" data-id="1001" id="1001" draggable="true" ondragstart="drag(event)" ondrop="drop(event)"> 
      <img id="image"src="<?php echo base_url()?>assets/invoice/preview/1001.png" alt="title">Title 
     </div> 

ich wie erreichen wollen, wenn ich per Drag bin und Bild fallen, so dass die Zeit vollständige Tabelle in unten div hinzufügen müssen müssen

Ich habe mehrere Tabellen, die wie die gesamte Tabelle funktionieren wird dragabble in div.Abbild mus nicht von Ort zu entfernen. Nur sein Inhalt benötigt, um zu klonen oder ähnlich.

Im Moment bekomme ich unten Fehler. Aber nicht sicher, warum es mir diesen Fehler zeigt.

TypeError: data.html is not a function 

Wie kann ich das erreichen? Irgendwelche Ideen? Irgendwelche Vorschläge ?

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/ed5bmth2/1/

allowDrop = function(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
drag = function(ev) { 
 
    var DataId = ev.target.parentNode.getAttribute('data-id'); 
 
    var selected_table =$("#rows .sim-row[data-id='"+DataId+"']"); 
 
    ev.dataTransfer.setData("text",DataId); 
 
} 
 

 
drop = function(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}

#content { 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="rows"> 
 
    <table class="sim-row" data-id="1001" id="1001"> 
 
    <tr> 
 
     <td class="sim-row-header1 sim-row-edit width100" data-type="title">Main Title</td>       
 
     </tr> 
 
    </table> 
 
</div> 
 

 
<div class="buttons" data-id="1001" id="1001" draggable="true" ondragstart="drag(event)" ondrop="drop(event)"> 
 
    <img id="image"src="https://www.w3schools.com/html/img_logo.gif" alt="title">Title 
 
</div>

Hope this Ihnen helfen.