HTML5 svg drag and drop - how?

Question

I am trying to create an HTML5-based adventure / goggle and click game framework, and I want to start by creating a way to drag and drop objects (from the screen to hot spots or inventory, from inventory to hot spots, etc.)., With svg, representing both objects and hot spots (i.e., completely transparent forms for detecting hits). The idea is to drag an element and let it fall only if the mouse touches a hot spot.

I'm having some problems. First, assigning a draggable attribute to a <svg> or test circle does not work. I tried to put it in a <div> , but while the drag event was being logged and triggered, the ghost image did not display, as in the demo versions of html5rocks. How to fix drag and drop?

Here's the fiddle .