【发布时间】：2016-04-10 22:54:12
【问题描述】：
我对 javascript 比较陌生，并且正在学习使用 snap.svg 进行拖放。我的问题在于下降。我无法判断拖动的元素是否在放置目标上方。在这段代码中，我想将圆圈拖到正方形上，并认为我可以使用鼠标悬停。我的（提炼的）示例也可能是this post 的更简单版本。
var paper = Snap(300, 300);
var square = paper.rect(100, 100, 40, 40).attr({fill:"blue"});
var circle = paper.circle(50, 50, 20).attr({fill:"red"});
circle.drag();
square.mouseover(
function() {
console.log("Over the square");
}
);
如前所述，当您将指针移到蓝色方块上时，鼠标悬停会触发，但当您将红色圆圈拖到蓝色方块上时不会触发。如果你反转正方形和圆形的创建，鼠标悬停会以任何一种方式触发，但当然圆形在正方形的后面。
显然，该事件被捕获在视图层次结构（或其他东西）中并且不会传播。必须有一个简单的方法来解决这个问题。有什么帮助吗？
（如果最好的答案是“使用 jQuery”，那很好，但我很想学习如何直接完成这项工作，因为 snap.svg 让拖动变得如此简单。）
添加：我希望的方向：Element.drag() 的 snap.svg 文档部分说，“当元素被拖到另一个元素上时，drag.over.<id> 也会触发。 "一个很好的、基于事件的方向，它可以让我（例如）毫不费力地突出显示放置目标。
但我还没弄清楚如何监听那个事件！有什么帮助或建议吗？
【问题讨论】：
-
我认为这有点繁琐，除非我遗漏了什么，因为停止圆圈事件并允许鼠标悬停意味着它会阻止拖动工作。所以我认为这不会以某种“简单”的拖拽方式起作用。想到“可能”起作用的选项是在拖动处理程序中添加一些盒子碰撞类型检测，或者可能将处理程序附加到纸上，但是你没有直观的拖动，这可能会变得很繁琐并且可能无论如何都不起作用。
-
然而，当圆圈在方块/目标后面时，方块会收到事件并且拖动继续。
标签： javascript svg drag-and-drop snap.svg