可以拖动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

这是一个老问题，但无论如何我都会尽力回答它。 我提出的解决方案就是这样的：

1. 使用JQueryUI创建“可拖动”功能。 它有很多方便的钩子。
2. 将mouseover和mouseout事件附加到SVG元素。
3. 创建自定义拖放管理器。
4. 开始拖动时，使用dragdrop管理器注册元素（或关联数据）。
5. 将鼠标悬停在放置目标上时，使用dragdrop管理器注册该目标。
6. 检查JQueryUI.draggable的“stop”事件的“drop”条件，然后在那里进行处理。

您可以在此处查看此操作的示例（使用D3生成SVG）： http ： //bl.ocks.org/thudfactor/6611441

Answer 2

你可以使用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");

});

Answer 3

实际上，SVG很难操纵。 这是一个你可以编程的例子 ; 只看源头。

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

1. 您可以使用不同的z索引使碎片绝对定位<div> ，然后使用jquery ui移动它们。
2. 您可以使用Canvas和HTML5 。 使用它，您也不需要JQuery UI。