Drag and drop events in embedded SVG?

drag-and-drop svg google-closure clojurescript
Rom1 picture Rom1 · Sep 5, 2012 · Viewed 13.7k times · Source

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

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>

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

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

Any hints?

Thanks

Answer

methodofaction picture methodofaction · Sep 5, 2012

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

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

Related questions

Drag and drop elements from list into separate blocks

I'm trying to get a jQuery component similar to the one on this site. Basically, there is a list with available elements that you can drag and drop into several blocks. I have quite a bit of JavaScript development experience, …

Read More
drag drop files into standard html file input

These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here. But sometimes we don't want that much coolness. What …

Read More
How do I drag and drop files into an application?

I've seen this done in Borland's Turbo C++ environment, but I'm not sure how to go about it for a C# application I'm working on. Are there best practices or gotchas to look out for?

Read More