Javascript 如何粘贴交互JS拖动的元素

行为是：捕捉到所有其他可拖动元素

我尽了我所能，但我无法在十字路口证明这一点。应用任何捕捉时不会传递到另一个捕捉

我想用interact提供的可能性来进行快照活动

我在这里创作了一把小提琴：

这是我的JS代码：

var-element=document.getElementById（'draggable-element'））
var x=0；变量y=0
var目标=[
//{x:500，y:350}，
//{x:500，y:410}，
//{x:620，y:350}，
//{x:620，y:410}，
{x:500}，
{x:620}，
{y:350}，
{y:410}
];
const mySnap=interact.modifiers.snap({
目标:目标,，
范围：20，
相对点：[
{x:0，y:0}，//相对于元素左上角的捕捉，
//{x:0.5，y:0.5}，//到中心
{x:1，y:1}//并在右下角
]
});
互动（元素）
.拖拉({
修改器：[
糠秕
],
惯性：错误
})
.on（'dragmove'，函数（事件）{
var target=event.target
//在data-x/data-y属性中保持拖动位置
var x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx
变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy
//翻译元素
target.style.webkitTransform=
target.style.transform=
'翻译（'+x+'px'，+y+'px）'
//更新posiion属性
target.setAttribute（'data-x'，x）
target.setAttribute（'data-y'，y）
}) 
.可调整大小({
//从所有边和角调整大小
边：{left:true，right:true，bottom:true，top:true}，
修改器：[
糠秕
],
惯性：错误
})
.on（'resizemove'，函数（事件）{
var target=event.target
var x=（parseFloat（target.getAttribute（'data-x'））| | 0）
变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）
//更新元素的样式
target.style.width=event.rect.width+'px'
target.style.height=event.rect.height+'px'
//从上边缘或左边缘调整大小时平移
x+=event.deltaRect.left
y+=event.deltaRect.top
target.style.webkitttransform=target.style.transform=
'翻译（'+x+'px'，+y+'px）'
target.setAttribute（'data-x'，x）
target.setAttribute（'data-y'，y）
target.textContent=Math.round（event.rect.width）+'\u00D7'+Math.round（event.rect.height）
})

*{
保证金：0；
填充：0；
}
#可拖动元件{
宽度：72px；
高度：72px；
背景：黄绿色；
位置：绝对位置；
左：0px；
顶部：0px；
触摸动作：无；
}
#导箱{
宽度：120px；
高度：60px；
背景：小麦；
位置：绝对位置；
左：500px；
顶部：350px；
}
.line-x{
位置：绝对位置；
高度：1px；
宽度：100%；
背景色：番茄；
}
.line-y{
位置：绝对位置；
宽度：1px；
身高：100%；
背景色：青色；
}
.line-x.xT-line{top:350px；}
.line-x.xB-line{top:410px；}
.line-y.yL-line{left:500px；}
.line-y.yR-line{左：620px；}

文件