jquery ui - drag svg element onto HTML element -

I want to drag an SVG element onto an HTML element. There is no obvious way to ensure this.

However, I think my method is filthy, but I think I can start dragging with the svg element with D3. Behaviour.drag () and d3, I'm going to clone a copy (please feel that this is just a circle object) and handle jquery UI drag event. The problem is that I do not know how to trigger the drag event on the newly created jquery element.

  var drag = d3.behavior.drag () .on ("drag", function (d) {// create a clone html object. Dragging node $ ('. Dragging-node ') Atrator (' dragable ', true); $ (' dragging-node '). Trigger (' dragger ');}); Var node = VSACATelt ("GNET"). Data (nodes). Enter () .andend ("STV: g") .ttt ("class", "node") .Col (drag);  

Any ideas how to start drag for this newly created clone object? Or is there any clever way to get what I want?

Any help would be appreciated!

I have done something like that, and it worked fine for simple stuff, but something After a while it became clear that using jQueryUI's dragbble is very clear, because it is much stronger. I also needed to use Droppable functionality in conjunction; Perhaps it is less than your needs, if so:

You do not need to trigger artificially cloned elements (aka "drag helper" in the draggable terminology of jQueryUI). Instead, the events should be triggered on the element that started the drag and drag behavior was applied to it, but update Helper's condition.

Something like this:

  // Helper is a clone element, which is not present until the start of dragging (Alternatively it may already exist but hidden ) The original container of var $ helper = null // $ helper, which is probably outside the SVG var $ helperParent = $ ('body') var drag = d3.behavior.drag () .on ("dragstart", function ( D) {$ helper = ... // somehow create a clone helper, on dragert (not on drag) .appendTo ($ helperParent)}). Set the mouse position relative to the parent (// "hello" Update $ helper.css status ({left: mouseospace [0], top: mousepage [1]});} .on ("dragend", function (d) {// helper.remove Remove (or hide);});