我有 2 个盒子和一张照片。用户可以在两个框之间拖动图片。如何判断图片是从哪个框拖出来的？我尝试查看图片的父元素，但这不起作用，因为我猜 HTML 没有改变。
<!DOCTYPE html>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dropone(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
nodeCopy.setAttribute("style", "position:absolute; left:" + ev.x + "px;top:" + ev.y + "px;transform:translate(-" + nodeCopy.width / 2 + "px,-" + nodeCopy.height / 2 + "px)");
ev.target.appendChild(nodeCopy);
}
function drop(ev) {
if (document.getElementById('picture').parentElement.id == 'bluebox') {
alert("YOU DRAGGED FROM THE BLUE BOX!");
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
nodeCopy.setAttribute("style", "position:absolute; left:" + ev.x + "px;top:" + ev.y + "px;transform:translate(-" + nodeCopy.width / 2 + "px,-" + nodeCopy.height / 2 + "px)");
ev.target.appendChild(nodeCopy);
} else if (document.getElementById('picture').parentElement.id == 'redbox') {
alert("YOU DRAGGED FROM THE RED BOX!");
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
nodeCopy.setAttribute("style", "position:absolute; left:" + ev.x + "px;top:" + ev.y + "px;transform:translate(-" + nodeCopy.width / 2 + "px,-" + nodeCopy.height / 2 + "px)");
ev.target.appendChild(nodeCopy);
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: block;
height: 300px;
width: 300px;
background-color: red;
}
.boxtwo {
display: block;
height: 300px;
width: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<span id="redbox" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<br />
<span id="bluebox" class="boxtwo" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="picture" ondrop="drop(event)">
<img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
</span>
</body>
</html>或者，在此处查看 TryIt:https://www.w3schools.com/code/tryit.asp?filename=GBYRXSX3L0PP
提前致谢!
最佳答案
在您正在运行的代码中:
var nodeCopy = document.getElementById(data).cloneNode(true);
我相信这是复制根元素(原始元素的引用)并复制其原始细节，这意味着所有元素都源自蓝色框 -
可以尝试代替使用克隆节点
1)
创建一个元素 div 并将其附加到用户通过拖放输入提供的位置
2)
为元素编写严格的 html 并使用 incertAdjacenthtml https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
查看这篇关于从源元素创建原始克隆元素主题的文章
How do I correctly clone a JavaScript object?
希望这可以帮助您调试!
沃利
关于javascript - 我有2个盒子和一张照片。用户可以在两个框之间拖动图片。如何判断图片是从哪个框拖出来的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60251506/