Glisser et déposer des problèmes

Question

Je dois faire un glisser-déposer sur mon site. J'ai deux options dans lesquelles je dois choisir un glisser-déposer dans un carré. Mon premier problème est que lorsque je fais glisser un objet, je ne peux pas le ramener et mon deuxième problème est que lorsque je déplace les positions de mon carré et de mes objets, le glisser-déposer ne fonctionne pas. Quelqu'un peut-il m'aider ici? ou bien y at-il un plugin jQuery qui correspond à mon concept?

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

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)"> 
 
<img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)">

Answer 1

vous avez pour envelopper les images dans un côté div exactement le même comme le div que les images vont être abandonnées.

La partie JavaScript que vous avez mentionnée semble correcte. juste envelopper les images à l'intérieur d'un div

s'il vous plaît donner plus de détails sur le second prob. Que voulez-vous dire bu changer la position de la place et des articles

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

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;"></div> 
 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;"> 
 
     <img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)" width="100" height="100" /> 
 
     <img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)" width="100" height="100" /> 
 
    </div>