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

用另一个替换现有图像

1 个答案: