Jquery glisser et déposer en fonction de l'ID de données

Question

Je suis un novice pour glisser-déposer des fonctionnalités.

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> 

Je veux obtenir comme chaque fois que je suis glisser-déposer une image afin que le temps tableau complet doit avoir besoin d'ajouter en dessous div

J'ai plusieurs tables qui fonctionnera comme toute la table sera dragabble dans div.But image mus t ne pas retirer de place.Seulement son contenu requis pour cloner ou similaire.

En ce moment, je reçois ci-dessous erreur.Mais pas sûr pourquoi il me montre cette erreur.

TypeError: data.html is not a function 

Comment puis-je y parvenir? Des idées? Aucune suggestion ?

Answer 1

Ici, vous allez avec une solution 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>

Espérons que cela vous aidera.