Перетаскивание событий во встроенном SVG?

есть ли возможность получения событий перетаскивания из элементов SVG на веб-странице?

я попробовал библиотеку закрытия Google, но безрезультатно.

в частности, предположим, что моя страница содержит

<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)))

Потом do получить изображение перетаскивания (призрак), хотя мне не удается получить события перетаскивания, например, делая

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

использование аналогичного кода для SVG стихии, я даже не получаю призрака...

какие-то намеки?

спасибо

7
clojurescript drag-and-drop google-closure svg

2 ответов

события перетаскивания не поддерживаются в элементах SVG:http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

вы можете подделать события перетаскивания с помощью событий мыши, см. http://svg-whiz.com/svg/DragAndDrop.svg (просмотр источника).

14

вы всегда можете его реализовать. В принципе, вы должны проверить, касается ли элемент другого при перетаскивании:

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

и это работает во всех браузерах. Надеюсь, это поможет:)

1