【问题标题】:How to move svg image with dragging another element?如何通过拖动另一个元素来移动 svg 图像?
【发布时间】:2018-02-21 19:12:19
【问题描述】:

我想知道是否可以通过拖动来移动位于另一个元素下的图像。不知道怎么形容清楚,请看下面的demo。

https://jsfiddle.net/david7418/o497akje/10/

我想从透明照片的顶部触发拖动事件并将另一张照片移动到它下面而不是它本身。

 $(function() {
       obj = Snap(".cat");
       //Enable drag event
       obj.drag();
 }

任何想法都将不胜感激。

【问题讨论】:

  • 您可以在 css 中使用 pointer-events:none 来忽略来自顶层的拖动。不过,这是否是您想要的还不是很清楚。一个例子..jsfiddle.net/o497akje/12
  • 谢谢。很神奇,不知道效果如何。有一个小问题。如果我在图像上添加指针事件:无,它似乎会破坏 svg 内元素上的所有事件。 jsfiddle.net/david7418/o497akje/14。我在3g元素上添加了点击事件,如果pointer-events:none存在则无法触发。
  • 是的,如果您禁用指针事件。它也会禁用点击。所以这真的取决于你追求的是什么。我能想到的唯一另一件事是将拖动和点击放在 svg 纸上并从 event.target 检测要做什么。
  • 是的,我想我可以删除 pointer-events:none 样式,然后一切正常。但这可能会导致一些用户体验问题。除非用户单击“完成”按钮,否则我不知道何时删除样式。 event.target 有什么例子吗?检测到事件目标后该怎么办?
  • @lan 你能否为指针事件做一个新的答案:没有一个?我认为这是一个正确的答案。我会把它标记为正确答案。

标签: jquery svg snap.svg


【解决方案1】:

你可以使用

pointer-events:none 

使用 css 使 svg 元素不创建鼠标事件。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-27
    • 1970-01-01
    • 2017-03-29
    相关资源
    最近更新 更多