用另一个替换现有图像

Replace an existing image with another

本文关键字：图像 替换 另一个      更新时间：2023-09-26

我正在尝试构建一个简单的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>

有人能给我一个提示吗？谢谢

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

克隆元素后，将仅将其副本添加到可丢弃对象中。

相关文章：