Javascript 可以拖动HTML dom元素&；放在SVG dom元素上？

我目前正在使用Raphaël JS（开放切换到jQuerySVG）和jQueryUI来尝试制作一个棋盘游戏的原型。这有点类似于风险，因为棋盘是一张地图，你可以（希望很快）将棋子从地图上的一个区域拖到另一个区域（比如从a到B），然后放到那里。一旦删除，它将触发回调以执行某些工作

现在我一直在尝试拖放功能。我想拖动一个html元素（div）并将其放到SVG元素上。我对SVG不是很熟悉，但据我所知，在让HTML和SVG DOM协同工作时有一些问题需要克服

我有两个版本，我正试图让jqueryui通过它们中的任何一个拖放到其中。一种是将jquerysvg与svgdom插件+jqueryui一起使用，另一种是Raphaël+jqueryui。他们两人似乎都没有发起坠落事件。据我所知，Raphaël版本不起作用，因为jQuery的dom操作无法与SVG dom交互

JS Fiddle jQuery SVG：（很抱歉，您必须向下滚动很远才能看到SVG元素）

其他可能的解决方案似乎是：
a）使用Raphaël及其内置的

拖动

和

onDragOver

函数，尽管我使用了所有SVG，并且我尝试使用HTML dom来处理移动的片段，因为它们将是图像（带有背景图像的div）。此外，我可能必须自己实施drop。

---

b）尝试使用HTML5拖放，尽管我不确定这是否可行。

事实上，SVG很难操作；只要看看来源

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

您可以使用不同的z索引将片段绝对定位到

s，然后使用jqueryui移动它们

。使用这个，您也不需要jqueryui 您可以使用raphal.js 这可以通过应用简单的jquery拖放来实现，使我们的html元素可以拖放，而您的rapheal paper 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>

---

这是个老生常谈的问题，但无论如何我都会尝试回答它。我想出的解决方案是这样的：

使用JQueryUI创建“可拖动”功能。它有很多 方便的挂钩

将mouseover和mouseout事件附加到SVG元素

创建自定义拖放管理器

开始拖动时，请注册元素（或关联数据） 和dragdrop管理器一起

当您将鼠标悬停在放置目标上时，请将该目标注册到 dragdrop管理器

检查JQueryUI.draggable的“停止”事件上的“丢弃”条件，然后 在那里进行所需的处理

---

您可以在这里看到一个示例（使用D3生成SVG）：

您找到问题的解决方案了吗？

$(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");

});