可以拖动HTML dom元素并放到SVG dom元素上吗？

Question

我目前正在使用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与背景图像).另外,我可能不得不自己实施drop.
b)尝试使用HTML5拖放,虽然我不确定这也会有用.

Answer 1

事实上，SVG 很难操作。这是一个您可以基于以下示例进行编程的示例；只要看看源码就可以了。

或者，如果您决定放弃 SVG，这里有一些其他想法。