嵌入式 SVG 中的拖放事件?

问题描述

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

Is there any possibility of receiving drag and drop events from SVG elements within a web page?

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

I tried the Google Closure library, to no avail.

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

Specifically, suppose my page contains

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

我的脚本包含 (Clojurescript/C2)

And my script contains (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)))

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

Then I do get a drag image (ghost), although I do not manage to receive drag events e.g. by doing

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

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

Using similar code for SVG elements, I do not even get a ghost...

有什么提示吗?

谢谢

推荐答案

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

Drag events are not supported on SVG Elements: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

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

You can fake the drag events with mouse events, see http://svg-whiz.com/svg/DragAndDrop.svg (view the source).

这篇关于嵌入式 SVG 中的拖放事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！