Javascript 当位于画布上时，如何将拖放项目移动到特定位置？

我正在使用可拖动对象的平板电脑环境中工作。 拖放功能有效，甚至可以在实现时一次拖动多个对象

参考文献包括：

&

我的代码的当前版本如下所示：

#容器{
宽度：200px；
高度：200px；
位置：相对位置；
背景：黄色；
顶部：100px
}
main1{
位置：相对位置；
}
第一组{
位置：绝对位置；
顶部：0px；
左：100px；
高度：72px；
宽度：72px；
背景：红色；
边框：0px实心#666；
保证金：0；
填充：0；
} 
清理
您应该使用jQueryUI的拖拽式和触摸式穿孔来实现移动友好性

让我知道这是否接近你所寻找的，我们可以根据需要进行调整


$（文档）.ready（函数（）{
$（'#div1'）.draggable（）；
$（“#容器”）。可拖放({
drop：函数（事件、用户界面）{
警惕（“你把红色扔到了黄色上”）；
}
});
$（文档）。在（“单击”，“动画”选项卡上，函数（）{
//简单动画，仅指定偏移
//$（'#div1'）。设置动画（{顶部：“250px”，左侧：“250px”}）；
//其他动画选项
$（'#div1'）。设置动画({
顶部：“15px”，
左：“15px”
}, {
持续时间：555，//以像素为单位的动画时间
放松：“easeOutQuart”//参见https://api.jqueryui.com/easings/
}); 
});
});
#容器{
宽度：200px；
高度：200px；
位置：相对位置；
背景：黄色；
顶部：100px
}
身体{
位置：相对位置；
}
#第一组{
位置：绝对位置；
顶部：0px；
左：100px；
高度：72px；
宽度：72px；
背景：红色；
边框：0px实心#666；
保证金：0；
填充：0；
}
#动画片{
位置：固定；
右：10px；
底部：10px；
显示：内联块；
填充物：3px 5px；
背景颜色：绿色；
颜色：白色；
边界半径：6px
}

拖放
使有生气


拖放
#容器{
宽度：200px；
高度：200px；
位置：相对位置；
背景：黄色；
顶部：100px
}
身体{
位置：相对位置；
}
#第一组{
位置：绝对位置；
顶部：100px；
左：100px；
高度：72px；
宽度：72px；
背景：红色；
边框：0px实心#666；
保证金：0；
填充：0；
}
清理
$（文档）.ready（函数（）{
$（'#div1'）.draggable（）；
$（“#容器”）。可拖放({
drop:function（）{
$（'#div1'）。设置动画（{顶部：“100px”，左侧：“100px”}）；
}
});
});
您想让
红色div
在进入
黄色div
或松开鼠标时立即捕捉到特定位置吗？谢谢您，Alex，谢谢您的快速响应！当红色div进入黄色div并释放鼠标时。非常感谢您，Tom Gerken！是的，那真的很好，谢谢你！下一个问题将是添加一个函数，将红色div移动到屏幕上的特定坐标-使用animate执行此操作有意义吗？我假设必须添加一个函数，将红色div移动到屏幕上的特定坐标-这意味着需要红色div的初始坐标（它们可以从css中的#div1中提取出来吗？）并且需要一个函数来将红色div移动到相应的坐标。我找到了一些关于如何相对于当前位置移动对象的教程（例如[），这并不是我要搜索的。没问题，Melanie，是的，使用jQuery的动画功能，指定顶部和左侧偏移（如果要将对象居中，通常需要添加对象宽度/高度的一半）我在回答中添加了一个示例我试图在函数的代码中包含类似的内容，但我似乎犯了一个错误，因为div不再是可拖动的：
$（document）.ready（function（）{$（'#div1'）.draggable（）；$（'#container'）.dropable（{drop:function（100，0）{var d=document getElementById（'div1'））；d.style.position=“absolute”；d.style.left=100+'px'；d.style.top=0+'px'；}}}）；
哇，太棒了！非常感谢@Tom Gerken！我将尝试将动画与拖放功能合并（用动画替换警报）！