在JavaScript中捕捉拖放项

我正在尝试使用拖放将图片从一个

移动到另一个

目前，我可以将图片移动到目标
中的任何位置，但我真正想要的是，当图片被删除时，它们会捕捉在一起。理想情况下，它们可以在任何一侧（不仅仅是底部或右侧）咬合在一起

我尝试了一些不同的方法（包括使用
），但都没有成功

这就是我到目前为止所做的：


var克隆；
var offsetx=null；
var offsety=null；
var-isClone=false；
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
offsetx=ev.target.offsetLeft-event.clientX；
offsety=ev.target.offsetTop-event.clientY；
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能回收站（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
var remove=document.getElementById（数据）；
remove.parentNode.removeChild（移除）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
}
功能dropClone（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
var num=Math.random（）*（1000-1）+1；
isClone=true；
clone=document.getElementById（数据）.cloneNode（true）；
clone.id=“newId”+num.toString（）；
clone.style.position=“绝对”；
clone.style.left=（event.clientX+offsetx）+“px”；
clone.style.top=（event.clientY+offsety）+“px”；
ev.target.appendChild（克隆）；
}
html，正文{
身高：100%；
填充：0；
保证金：0；
}
div{
宽度：50%；
身高：50%；
浮动：左；
}
#第1部分{
背景：DDD；
}
#第二组{
背景：#AAA；
}
#第三组{
背景：#777；
}
#第4部分{
背景：#444；
}
#伊姆格迪夫{
宽度：611px；
高度：324px；
边框：5px实心#DDD；
}
开始拖动图像时，需要存储光标相对于特定图像的位置

中有多个位置属性可以帮助您计算，但如果浏览器支持不是问题，我会选择和。从文档中：

MouseEvent接口的
offsetX
/
offsetY
只读属性提供该事件和目标节点填充边缘之间鼠标指针的
X
/
Y
坐标中的偏移量

因此，接下来，您只需执行以下操作：

x = e.offsetX;
y = e.offsetY;

然后，当您将图像放置在画布中时，我们将其称为画布（注意斜体，因为它不是
元素，而是用作放置区域的任何其他元素，在这个特定示例中是
），您需要知道光标相对于画布的位置，因此，您可能认为您可以再次使用
offsetX
和
offsetY
，您的回答部分正确。如果您将图像放在画布上，则会得到预期的值，但其中可能已经有其他图像，您可以将当前图像放在另一个图像上，从而获得相对于该图像的
offsetX
和
offsetY

您可以使用和，从该值中减去画布元素（左上角）的位置，您可以从和获得：

这样，您将获得光标相对于画布元素的位置

现在，您需要减去存储在
dragstart
上的
x
和
y
值，这将给出拖动图像左上角相对于画布元素的
左
和
上
值：

总的来说，它看起来是这样的：


设x；
让y；
让currentTarget=null；
让cloneElement=false；
函数startDrag（e，克隆）{
const target=e.target；
如果（target.tagName=='IMG'）{
x=e.offsetX；
y=e.offsetY；
当前目标=目标；
克隆元素=克隆；
}
}
功能克隆图像（e）{
startDrag（e，true）；
}
函数移动图像（e）{
startDrag（e，false）；
}
函数removeImage（e）{
如果（！cloneElement）{
currentTarget.remove（）；
}
}
函数stickImage（e）{
const image=cloneElement？currentTarget.cloneNode（true）：currentTarget；
imagesCanvas.appendChild（图像）；
//边界+1
image.style.left=（e.pageX-imagesCanvas.offsetLeft-x+1）+“px”；
image.style.top=（e.pageY-imagesCanvas.offsetTop-y+1）+“px”；
currentTarget=null；
}
函数allowDrag（e）{
e、 预防默认值（）；
}
//绑定事件侦听器：
常量imagesBarElement=document.getElementById（'imagesBar'）；
const imagesCanvasElement=document.getElementById（'imagesCanvas'）；
文件。附录列表（“绘图者”，allowDrag）；
文件。附录列表（“dragover”，allowDrag）；
imagesBarElement.addEventListener（'dragstart'，克隆图像）；
imagesBarElement.addEventListener（'drop'，removeImage）；
imagesCanvasElement.addEventListener（'dragstart'，moveImage）；
imagesCanvasElement.addEventListener（'drop'，stickImage）
正文{
保证金：0；
字号：0；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
用户选择：无；
}
img{
宽度：100px；
高度：100px；
}
#imagesBar{
高度：100px；
边框底部：1px实心#CCC；
填充：10px0；
}
#imagesBar>img{
利润率：0.10px；
}
#图像扫描{
位置：相对位置；
背景：#EEE；
柔性生长：1；
溢出：隐藏；
}
#imagesCanvas>img{
位置：绝对位置；
}

@Yikes哪个部件不能正常工作？你的意思是说，你只是想让图像并排排列，而不是将它们自由移动到任意位置吗？不，你完全明白我想要它做什么（谢谢你花时间把这些都写出来）！不管出于什么原因，当我试着运行这段代码时，即使是普通的drop也不起作用。图像会反弹回原来的位置
e.pageX - imageCanvas.offsetLeft;
e.pageY - imageCanvas.offsetTop;

image.style.left = (e.pageX - imagesCanvas.offsetLeft - x) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y) + 'px';