javascript - 用另一个替换现有图像

Question

我正在尝试构建一个简单的 Javascript 来拖放图像。 拖放后的拖动图像应在其原始位置重新生成。 我正在尝试这样的事情，但似乎行不通；它不会重新生成图片:

我的js函数:

var nPedY = 21;
var nPedR = 21;
var red = new Image(50,50);
red.src = "red.png";

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));
    if (data == "drag1"){
        document.getElementById("drag1").src = red.src;
        console.log(nPedR);
    }
}

还有我的 HTML 标记:

<tr>
<td width="50px" height="50px"><img id="drag1" src="red.png" align="center" draggable="true" ondragstart="drag(event)"></td>
<td width="50px" height="50px"><img id="drag2" src="yellow.png" align="center" draggable="true" ondragstart="drag(event)"></td>
</tr>

谁能给我一个提示？谢谢。

Answer 1

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

一旦你克隆了这个元素，只有它的一个副本会被添加到 droppable 中。