gpt4 book ai didi

javascript - 使用 HTML 和 JS 拖放 2 个以上的图像

转载 作者:行者123 更新时间:2023-11-28 02:44:18 26 4
gpt4 key购买 nike

如何使用 HTML 和 JS 拖放超过 2 个图像,我有 4 个 div 和 4 个图像,每次拖放超过 2 个时,第一个 img 会放回原来的位置,不超过 2 个图片可以拖到div,我说得对吗?这是我的 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));
}
<p>على عكس الحزازيات والسرخسيات، لا تُكوِّن الجراثيم نباتات مشيجية، بل تنتج مباشرة<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  أو <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><br>
يتمّ التلقيح في <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> حين تُطلِق <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> الذكرية أعدادًا كبيرة من حبوب اللقاح التي تنتقل في الهواء.
<br><img id="drag1" src="Images/first-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag2" src="Images/second-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag2" src="Images/third-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag2" src="Images/forth-ans.png" draggable="true"
ondragstart="drag(event)" height="48"></p>

最佳答案

请修复您的 img id

<br><img id="drag1" src="Images/first-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag2" src="Images/second-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag3" src="Images/third-ans.png" draggable="true"
ondragstart="drag(event)" height="48">
<img id="drag4" src="Images/forth-ans.png" draggable="true"
ondragstart="drag(event)" height="48"></p>

要找到此类问题,您应该学习如何使用调试

关于javascript - 使用 HTML 和 JS 拖放 2 个以上的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46997880/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com