在snap.svg中拖动和鼠标悬停

Question

我对javascript比较陌生，并且正在使用snap.svg学习拖放。 我的问题在于下落。 我无法判断所拖动的元素是否在放置目标之上。 在这段代码中，我想将圆圈拖动到正方形上，并认为可以使用鼠标悬停。 我（蒸馏水）例如也可以是一个简单的版本， 这个帖子 。

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”，那很好，但是我很想学习如何直接使用jQuery，因为snap.svg使拖动变得如此简单。）

另外 ：我希望的方向： Element.drag()的snap.svg文档部分说：“将Element拖动到另一个元素上时， drag.over.<id>触发drag.over.<id> 。” 一个很好的，基于事件的指示，这将使我（例如）突出显示放置目标而没有太多麻烦。

但是我还没有弄清楚如何听那个事件！ 有什么帮助或建议吗？

Answer 1

从我能想到的点开始，没有碰撞或元素检测的唯一快速方法是，在对象之前放置一个几乎不可见的克隆，然后在您无法真正看到的DOM中放置它，例如...

paper.append( square.clone().attr({ opacity: 0.000001 }) )

jsfiddle

我想这取决于您的svg的复杂程度，如果您将它放下，也会有一个小问题，如果您将svg放到它上面，您的redrag开始就不会被拾取，因此您需要对此进行编码也一样 我认为某些测试可能将是最没有错误的解决方案（SO上有一些getElementFromPoint或命中检测类型解决方案的解决方案）。

上面的点的jsfiddle解决方法