可以将HTML DOM元素拖放到SVG DOM元素上？
我目前正在使用RaphaëlJS（可以切换到jQuery SVG）和jQuery UI来尝试制作棋盘游戏的原型。 它与Risk有些类似，因为该板是一张地图，您可以（希望很快）将地图上的一个区域中的棋子拖放到另一个区域（比如从A到B），然后将它们放在那里。 一旦下降，它会触发回调做一些工作。
现在我被卡住了试图获得拖放功能。 我想拖动一个html元素（div）并将其放到SVG元素上。 我对SVG并不是很熟悉，但是从我的理解来看，要让HTML和SVG DOM一起工作需要克服的问题。
我有两个版本，我试图让jQuery UI拖放到任何一个。 一个是使用jQuery SVG与svgdom插件+ jQuery UI，另一个只是Raphaël+ jQuery UI。 他们两人似乎都没有解雇掉落事件。 据我所知，Raphaël版本不起作用，因为jQuery的dom操作不能与SVG dom交互。
JS Fiddle jQuery SVG：http://jsfiddle.net/cqMUL/5/（你必须向下滚动才能看到SVG元素，我的道歉）。
其他可能的解决方案似乎是：
a）使用Raphaël的内置drag和onDragOver功能，虽然然后我使用所有的SVG，并且我试图使用HTML dom作为移动部件，因为它们将是图像（带有背景图像的div）。 另外，我可能不得不放弃自己。
b）试图使用HTML5拖放，但我不确定这也可以。
这是一个古老的问题，但无论如何，我会尽全力回答。 我提出的解决方案是这样工作的：
你可以在这里看到一个例子（使用D3来生成SVG）：http://bl.ocks.org/thudfactor/6611441
事实上，SVG很难操纵。 这里有一个你可以基于你的编程的例子; 只看源头。
或者，如果您决定放弃SVG，这里还有其他一些想法。
<div> s，然后使用jquery ui来移动它们。 你可以使用Rapheal.js它可以通过应用简单的jquery拖放来完成，使我们的html元素可拖动，并且你的rapheal纸div可放下。 这是代码
HTML代码：
<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代码：
$(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");
});
上一篇: Possible to drag an HTML dom element & drop onto an SVG dom element?