Javascript 我有一张照片，当我把它拖到红色圆圈时，它会复制下来。我希望它保持在被复制的位置，而不是捕捉到左上角

我有一张照片，当我把它拖到红色圆圈时，它会复制下来。我希望它保持在被复制的位置，而不是捕捉到左上角。我该怎么做

HTML:

JavaScript:

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");
   var nodeCopy = document.getElementById(data).cloneNode(true);
   nodeCopy.id = "newId";
   ev.target.appendChild(nodeCopy);
}

---

或者在这里查看一个TryIt:

事件有可以使用的变量

在本例中，im使用x和y，im使用这行代码以绝对位置定位图像

 nodeCopy.setAttribute("style", "position:absolute; left:"+ ev.x +"px;top:"+ ev.y+"px");

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
var nodeCopy=document.getElementById（数据）；
if（nodeCopy.classList.contains（'insideBox'））{
setAttribute（“样式”，“位置：绝对；左侧：“+ev.x+”px；顶部：“+ev.y+”px；变换：平移”（“+nodeCopy.width/2+”px，-“+nodeCopy.height/2+”px）”）；
}
否则{
nodeCopy=nodeCopy.cloneNode（真）
nodeCopy.classList.add（“insideBox”）；
nodeCopy.id=“newId”+数学随机（100）；
setAttribute（“样式”，“位置：绝对；左侧：“+ev.x+”px；顶部：“+ev.y+”px；变换：平移”（“+nodeCopy.width/2+”px，-“+nodeCopy.height/2+”px）”）；
ev.target.appendChild（nodeCopy）；
}
}

*{
保证金：0；
填充：0；
}    	
.盒子{
显示：块；
高度：300px；
宽度：300px；
背景色：红色；
}

请为问题添加更好的标题。谢谢！你真棒！它总是捕捉到鼠标所在的左上角。有没有办法让它准确地移动到鼠标所在的位置？还有，有没有办法让它只从盒子外面复制，如果它在盒子里面被拖来拖去，它会移动？再次感谢！谢谢，太棒了！最后一件事，如果它已经在红盒子里，你能让它移动吗？但当它从红盒子外面复制时，它会移动吗？我在原始代码片段中做了，但我不建议使用它。就拿它作为例子，看看它是怎么做的吧，我会研究它的。谢谢你的帮助！我知道我已经说过了“最后一件事”，但你有没有可能也让这项工作在手机上运行呢？我试图避免使用jQuery和其他库，我希望使用touchmove、touchstart和类似的事件来实现这一点。据我所知，您需要拖动事件和触摸事件才能使其适用于桌面和移动设备？提前谢谢！

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");
   var nodeCopy = document.getElementById(data).cloneNode(true);
   nodeCopy.id = "newId";
   ev.target.appendChild(nodeCopy);
}

 nodeCopy.setAttribute("style", "position:absolute; left:"+ ev.x +"px;top:"+ ev.y+"px");