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

如上所述，当您将指针移到蓝色方块上时，鼠标悬停将会触发，但是当您将红色圆圈拖到蓝色方块上时，鼠标悬停将不会触发。如果你颠倒了正方形和圆形的创建，鼠标悬停会以任何一种方式触发，但当然圆圈在正方形后面。

显然，事件会在视图层次结构（或其他内容）中被捕获，并且不会传播。必须有一个简单的方法来解决这个问题。有什么帮助吗？

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

添加：我希望的方向：Element.drag()的snap.svg文档部分地说，“当元素被拖到另一个元素上时，drag.over.<id>火也是。“一个精细的，基于事件的方向，这将让我（例如）突出显示掉落目标而不用大惊小怪。

但我还没弄明白该怎么听这个事件！有任何帮助或建议吗？

Answer 1

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

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

jsfiddle

取决于你的svgs将会是多么复杂，我想这是否有效，如果你把元素放在它上面，你的redrag启动不会被拾取，你也会有一些问题，所以你需要代码也围绕着这个。我认为一些测试可能是最无bug的解决方案（对于getElementFromPoint或命中检测类型解决方案，S.O上有一些解决方案）。

上面提到的

jsfiddle解决方法

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

1 个答案: