Question

如何使用HTML和JS拖放2个以上的图像，我有4个div和4个图像，每次拖放2个以上，第一个img被放回原来的位置，不超过2个图像可以拖到divs，我有意义吗？这是我的HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

请修复你的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>

要找到这类问题，您应该学习如何使用debug

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

1 个答案: