javascript - 在 snap.svg 中拖动并鼠标悬停

Question

我对 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");
        }
);

如前所述，当您将指针移到蓝色方 block 上时，鼠标悬停将会触发，但当您将红色圆圈拖动到蓝色方 block 上时，鼠标悬停则不会触发。如果反转正方形和圆形的创建，则鼠标悬停会以任一方式触发，但当然圆形位于正方形后面。

显然，事件被捕获在 View 层次结构(或其他东西)中并且不会传播。一定有一个简单的方法可以解决这个问题。有什么帮助吗？

(如果最好的答案是“使用 jQuery”，那很好，但我很想学习如何直接完成这项工作，因为 snap.svg 使拖动变得如此简单。)

添加:我希望的方向:Element.drag() 的 snap.svg 文档部分内容是“当 Element 被拖动到另一个元素上时， drag.over.<id> 也会触发。”一个基于事件的精细方向，可以让我(例如)突出显示放置目标，而无需大惊小怪。

但我还没弄清楚如何监听该事件!有什么帮助或建议吗？

Answer 1

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

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

jsfiddle

取决于你的 svgs 的复杂程度，我猜这是否有效，如果你将元素放在它上面，你也会遇到一个小问题，你的 redrag start 不会被拾取，所以你需要也围绕它编写代码。我认为一些测试可能是最无错误的解决方案(S.O 上有一些针对 getElementFromPoint 或命中检测类型解决方案的解决方案)。

jsfiddle上述问题的解决方法