snap.svg中的鼠标拖动

Question

我对javascript还比较陌生，并且正在学习如何使用snap.svg进行拖放。我的问题在下降。我不知道被拖走的元素是否在降落目标的上方。在这段代码中，我想把圆圈拖到正方形上，并认为我可以使用mouseover。我的(蒸馏)示例也可能是这个职位的一个更简单的版本。

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>也会触发。”一个精细的，事件为基础的方向，这将让我(例如)突出下降目标，而不大惊小怪。

但我还没弄清楚该怎么听那件事！有什么帮助或建议吗？

Answer 1

只有快速的方法，没有碰撞或元素检测，从点，我可以想到，是把一个几乎看不见的克隆在前面的对象，稍后在DOM中，你不能真正看到，例如.

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

小提琴

这取决于你的svgs会有多复杂，我想，如果你把元素放到上面，你的重拖开始就不会被捡起来，所以你也需要对它进行编码。我认为一些测试可能是最无bug的解决方案(对于getElementFromPoint或命中检测类型的解决方案，S.O上有一些解决方案)。

以上点的小提琴解决方案