Question

我为其中三个提供了三个可拖动的不同图像。

我有一个div div1，上面有可放置的标签。

我的问题是，只有第一个图像能够在div上删除，第二个和第三个div在div上却没有删除。

该如何纠正？

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com" draggable="true" ondragstart="drag(event)" width="150" height="69">
<img id="drag1" src="https://via.placeholder.com/728x90.png?text=sssecond+image" draggable="true" ondragstart="drag(event)" width="150" height="69">
<img id="drag1" src="https://via.placeholder.com/728x90.png?text=third+image" draggable="true" ondragstart="drag(event)" width="150" 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 {
    width: 450px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com" draggable="true" ondragstart="drag(event)" width="150" height="69">
<img id="drag2" src="https://via.placeholder.com/728x90.png?text=sssecond+image" draggable="true" ondragstart="drag(event)" width="150" height="69">
<img id="drag3" src="https://via.placeholder.com/728x90.png?text=third+image" draggable="true" ondragstart="drag(event)" width="150" height="69">

JavaScript中未发生多次拖放到相同位置的情况

1 个答案: