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与背景图像）。另外，我可能要自己实施掉落 b）尝试使用HTML5拖放功能虽然我不确定这是否会奏效。

Answer 1

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

使用JQueryUI创建“可拖动”功能。它有很多方便的钩子。
将mouseover和mouseout事件附加到SVG元素。
创建自定义拖放管理器。
开始拖动时，注册元素（或关联数据）与dragdrop经理。
当您将鼠标悬停在放置目标上时，请使用该目标注册该目标 dragdrop manager。
检查JQueryUI.draggable的“停止”事件的“丢弃”条件，并且在那里进行处理。

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

Answer 2

确实，SVG难以操纵。 Here is an example you could base your programming on;只看源头。

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

您可以使用不同的z索引使片段绝对定位<div>，然后使用jquery ui移动它们。
You could use Canvas and HTML5。使用它，您也不需要JQuery UI。

Answer 3

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

});

可以拖动HTML dom元素＆amp;放到SVG dom元素上？

3 个答案: