拖放 - 无法将拖放拖放到原始 position

Question

我有一个 HTML 代码，它可以拖放并按预期工作 - 我不知道如何将它拖回原来的 position。 这是 HTML 代码

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

 #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; }

 <p>Drag the image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">

Answer 1

在它起源的地方添加另一个放置点，并将其放入其中。

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

 #div1 { border: 1px solid #aaaaaa; }.drop-spot { width: 350px; height: 70px; padding: 10px; }

 <p>Drag the image into the rectangle:</p> <div id="div1" class="drop-spot" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div class="drop-spot" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69"></div>

Answer 2

也许，只需再添加一个块？

 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-to-drag { width: 350px; height: 70px; margin-top: 15px; padding: 10px; border: 1px solid #aaaaaa; }

 <p>Drag the image into the rectangle:</p> <div class="div-to-drag" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div class="div-to-drag" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69"> </div>

Answer 3

您可以使用此链接作为参考 - https://www.w3schools.com/html/html5_draganddrop.asp

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

 #div1, #div2 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; }

 <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>