嵌入式 SVG 中的拖放事件？答案

【问题标题】：Drag and drop events in embedded SVG?嵌入式 SVG 中的拖放事件？
【发布时间】：2012-08-30 06:37:21
【问题描述】：

是否有可能从网页中的 SVG 元素接收拖放事件？

我尝试了 Google Closure 库，但无济于事。

具体来说，假设我的页面包含

<ul id = "list">
  <li class="item" id="item1">foo</li>
  <li class="item">bar</li>
  <li class="item">baz</li>
</ul>

我的脚本包含 (Clojurescript/C2)

(let [items (select-all ".item")
      lst (select "#list")
      target (fx/DragDrop. lst nil)]
  (dorun (map
    (fn [item]
      (let [source (fx/DragDrop. item nil)]
        (. source (addTarget target))
        (. source (init))))
    items))
  (. target (init)))

然后我确实得到一个拖动图像（幽灵），虽然我没有设法接收拖动事件，例如通过做

(on-raw "#item1" :dragstart (fn [e] (.log js/console (str "dragstart " e))))

对 SVG 元素使用类似的代码，我什至没有得到一个幽灵......

有什么提示吗？

谢谢

【问题讨论】：

标签： drag-and-drop svg google-closure clojurescript

【解决方案1】：

SVG 元素不支持拖动事件：http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events。

您可以使用鼠标事件来伪造拖动事件，请参阅http://svg-whiz.com/svg/DragAndDrop.svg（查看源代码）。

【讨论】：

我知道这不是标准的一部分，但我希望一些浏览器会开始支持它，和/或封装 SVG 拖放的 JS 库将可用...谢谢你的例子！
Opera 确实支持 svg 元素上的拖动事件（与其他 HTML5 元素相同）。
确实如此！问题是我的代码，或 C2，或 Google 关闭和 Opera 似乎相处得不太好（我收到与 webkitMatchesSelector 或其他东西相关的奇怪错误......）。不知道其他浏览器会不会效仿？
此外，Chromium 似乎确实触发了至少一些拖动事件，但不会绘制幽灵。有没有办法解决这个问题？
嗯，用于拖放的鼠标事件甚至在 android 上都没有处理。您可能想改用pointerevent，根据文档，它应该是鼠标事件和触摸事件的合并。但仍然没有成功。然后尝试style="touch-action: none" 来抑制android 的默认浏览器捏合行为。但仍然......没有成功。

【解决方案2】：

你总是可以实现它。基本上，您必须在拖动时检查元素是否与另一个元素接触：

this.isTouching = function(element){
        if(this.x <= element.x && element.x <= (this.x + this.width) && 
           this.y <= element.y && element.y <= (this.y + this.height)){
           return true;
        }else{
            return false;
        }
    };

它适用于所有浏览器。希望对你有帮助:)

【讨论】：