Possible to drag an HTML dom element & drop onto an SVG dom element?
I'm currently using Raphaël JS (open to switching to jQuery SVG) and jQuery UI to try and make a prototype of a board game. It's somewhat similar to Risk in that the board is a map and you can (hopefully soon) drag pieces from one zone on the map to another (say from A to B) and drop them there. Once dropped, it would trigger a callback to do some work.
Right now I'm stuck trying to get the drag/drop functionality. I want to drag an html element (div) and drop it onto an SVG element. I'm not very familiar with SVG, but from what I understand there's issues to overcome in getting the HTML and SVG DOMs to work together.
I've got two versions and I'm trying to get jQuery UI to drag/drop to with either of them. One is using jQuery SVG with the svgdom plugin + jQuery UI and the other is just Raphaël + jQuery UI. Neither of them seems to be firing the drop event. As far as I know, the Raphaël version doesn't work because jQuery's dom manipulation can't interact with the SVG dom.
JS Fiddle jQuery SVG: http://jsfiddle.net/cqMUL/5/ (you'll have to scroll far down to see the SVG elements, my apologies).
The other possible solutions seem to be:
a) Using Raphaël with it's builtin drag and onDragOver functions, although then I'm using all SVG and I'm trying to use the HTML dom for the moving pieces because they will be images (div with background image). In addition, I'd probably have to implement drop myself.
b) Trying to use HTML5 drag & drop, although I'm not sure this would work either.
This is an old question, but I'll give a shot at answering it anyway. The solution I came up with worked like this:
You can see an example of this in action (using D3 to generate the SVG) here: http://bl.ocks.org/thudfactor/6611441
Indeed, SVG is difficult to manipulate. Here is an example you could base your programming on; just look at the source.
Alternatively, if ever you decide to abandon SVG, here are a couple of other ideas.
<div> s with different z-indexes, then use jquery ui to move them. you can use Rapheal.js It could be done by applying simple jquery drag and drop, Make our html element draggable and your rapheal paper div droppable. Here is 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");
});