在嵌入式SVG拖放事件？(Drag and drop events in embedded SVG?

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

我尝试了谷歌关闭图书馆，都无济于事。

具体来说，假设我的页面

<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元素，我甚至不得到鬼...

任何提示？

谢谢

Answer 1:

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

您可以假冒拖动事件与鼠标事件，看到http://svg-whiz.com/svg/DragAndDrop.svg （查看源）。

Answer 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;
        }
    };

和它的作品在所有浏览器。 希望能帮助到你 ：）

文章来源: Drag and drop events in embedded SVG?