2012-09-05 14 views
7

Gibt es eine Möglichkeit, Drag & Drop-Ereignisse von SVG-Elementen innerhalb einer Webseite zu empfangen?Drag & Drop-Ereignisse in eingebetteten SVG?

Ich habe versucht, die Google Closure-Bibliothek, vergeblich.

Insbesondere nehme meine Seite enthält

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

Und mein Skript enthält (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))) 

Dann ich ein Drag-Bild (Geist) zu bekommen, obwohl ich nicht tun Verwalten Sie, um Ereignisse zu empfangen, z von

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

Mit ähnlichem Code für SVG-Elemente zu tun, ich habe nicht einmal einen Geist ...

Irgendwelche Hinweise?

Dank

Antwort

13

Drag-Ereignisse werden nicht auf SVG-Elemente unterstützt: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

Sie können die Ziehereignisse mit Mausereignissen fälschen, siehe http://svg-whiz.com/svg/DragAndDrop.svg (Quelltext anzeigen).

+0

Ich weiß, dass dies nicht Teil des Standards ist, aber ich hatte gehofft, dass einige Browser es unterstützen würde, und/oder dass eine JS-Bibliothek verfügbar wäre, die Drag-and-Drop für SVG einkapseln würde ... Danke für das Beispiel! – Rom1

+1

Opera unterstützt Drag-Events auf SVG-Elementen (wie bei anderen HTML5-Elementen). –

+0

Tatsächlich tut es! Das Problem ist, dass mein Code oder C2 oder Google Closure und Opera nicht sehr gut miteinander auskommen (ich bekomme seltsame Fehler im Zusammenhang mit 'webkitMatchesSelector' oder etwas ...). Weißt du, ob andere Browser folgen werden? – Rom1

1

Sie können es immer implementieren. Grundsätzlich müssen Sie überprüfen, ob das Element beim Ziehen eine andere berührt:

Und es funktioniert in allen Browsern. Hoffe es hilft :)