javascript - 落在位置上。纯 Javascript/HTML5

Question

我目前正在做我的最后一年项目，需要开发一个网络。 我目前正在开发将图片拖到 div 中并在我放置的位置制作副本。我成功获得了 clientX 和 clientY 的坐标，但无法删除该坐标。关于如何通过使用 Javascript 和 HTML5 删除它的任何想法？

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {

   ev.preventDefault();
   window.alert( ev.clientX + ',' + ev.clientY);
   var data = ev.dataTransfer.getData("text");
   var nodeCopy = document.getElementById(data).cloneNode(true);
   ev.target.appendChild(nodeCopy);
   ev.stopPropagation();
   return false;
   
   
}

#div1 {
  
  width:500px;height:500px;padding:10px;border:5px solid #aaaaaa;float:left;

}

	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event) " > Drop here </div>

							<img id="drag1" src="images/shoe.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">
							<img id="drag2" src="images/LZK-Logo.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">

div1 是我要放置 drag1 和 drag2 的地方。只是我无法解决位置问题。任何想法 ？。

Answer 1

你只需要设置你的nodeCopy的位置。

var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.setAttribute("style","position:absolute; top:" + ev.clientY + "px; left:" + ev.clientX + "px;");
ev.target.appendChild(nodeCopy);

有了这个，您的图像的左上角就会定位到您放下图像时鼠标所在的位置。