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

Question

我目前正在使用 Raphaël JS（可以切换到 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。他们似乎都没有触发 drop 事件。据我所知，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. 当您开始拖动时，注册元素（或关联数据）
   与拖放管理器。
5. 当您将鼠标悬停在放置目标上时，将该目标注册到
   拖放管理器。
6. 检查 JQueryUI.draggable 的“停止”事件上的“删除”条件，以及
   在那里进行所需的处理。

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

Answer 2

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

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

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

Answer 3

你可以使用 Rapheal.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>

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

});