Is it possible to drag an HTML dom element and drop the SVG dom element?

Question

I am currently using Raphaël JS (open to switch to jQuery SVG) and the jQuery user interface to try to prototype a board game. This is somewhat similar to Risk, since the board is a map, and you can (hopefully soon) drag parts from one zone onto a map to another (say A to B) and drop them there. Once you reset, it will call a callback to do some work.

I'm stuck right now trying to get drag and drop functionality. I want to drag the html element (div) and transfer it to the SVG element. I am not very familiar with SVG, but from what I understand there are problems that need to be overcome in order to share HTML and SVG DOM.

I have two versions, and I'm trying to get the jQuery UI to drag onto any of them. One uses jQuery SVG with the svgdom plugin + jQuery interface, and the other only uses the Raphaël + jQuery interface. None of them seem to shoot at the drop event. As far as I know, the Raphaël version does not work, because jQuery dom manipulation cannot interact with SVG dom.

JS Fiddle jQuery SVG: http://jsfiddle.net/cqMUL/5/ (you'll have to scroll far down to see SVG elements, my apologies).

Other possible solutions seem to be:
a) Using Raphaël with its built-in drag and onDragOver , although then I use all onDragOver and I try to use HTML dom for the moving parts because they will be images (div with background image). Also, I probably have to implement the drop myself.
b) Trying to use drag and drop HTML5, although I'm not sure if this will work.

Answer 1

This is an old question, but I will give him an answer anyway. The solution I came up with works as follows:

• Use jQueryUI to create drag-and-drop functionality. It has many convenient hooks.
• Attach mouseover and mouseout events to SVG elements.
• Create a custom drag and drop manager.
• When you start dragging, register the item (or related data) with the dragdrop manager.
• When you hover over a drop target, register that target with the dragdrop manager.
• Check the drop criteria on the JQueryUI.draggable stop event and do the required processing.

Here you can see an example of this action (using D3 to generate SVG): http://bl.ocks.org/thudfactor/6611441

Answer 2

Indeed, SVG is difficult to manipulate. Here is an example on which you could base your programming on ; just look at the source.

Alternatively, if you decide to give up SVG, here are a few other ideas.

• You can make the shapes absolutely positioned <div> with different z-indices, and then use jquery ui to move them.
• You can use Canvas and HTML5 . Using this, you do not need a jQuery interface.

Answer 3

you can use Rapheal.js This can be done using a simple drag and drop jquery, make our html element drag and drop, and your Rapheal di divpable paper. Here is the code

HTML code:

 <table style = "width:600px; border:1 px solid black;"> <tr> <td> <div id="divDragable" class="ui-widget-content"> <p>Drag me around</p> </div> </td> <td> <div id="divDroppable"> </div> </td> </tr> </table> 

Jquery Code:

 $(function () { //--- Draggable $("#divDragable").draggable(); //-------------------- Code for Raphael--------------------- var paper = Raphael("divDroppable", 200, 200); // Making SVG droppable $("#divDroppable").droppable({ drop: function (event, ui) { // get targeted SVG elemnet by // event.originalEvent.target } }); var recatngleObj1 = paper.rect(10, 15, 50, 30, 2); recatngleObj1.attr("id", "emptyRect"); recatngleObj1.dropShadow(2, 3, 3, 1); recatngleObj1.attr("fill", "#B3E6FF"); });