用另一个替换现有的图像 [英] Replace an existing image with another

问题描述

我正在尝试构建一个简单的Javascript来拖放图像。
被拖拽后的图像应该在原始位置重新生成。
我正在尝试这样的事情，但它似乎不起作用;它不会重新生成图片：

I'm trying to build a simple Javascript to drag and drop an image. The dragged image after being dragged and dropped should regenerate in its original position. I'm trying something like this, but it seems to not work; it doesn't regenerate the picture:

我的js函数：

My js function:

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标记：

And my HTML markup:

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

任何人都可以给我一个提示吗？谢谢。

Can anyone give me an hint? thanks.

推荐答案

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

一旦您克隆元素，只会将其副本添加到可放下。

Once you clone the element, only a copy of it will be added to the droppable.

这篇关于用另一个替换现有的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！