Question

我想将svg元素拖到HTML元素上。不确定这是一种聪明的方法。

但是，我认为我的方法很脏，但我想我可以用d3.behavior.drag（）和d3的拖动功能从svg元素开始拖动，我要克隆一个副本（请认为它只是圆圈对象）让jquery ui处理拖动事件。问题是我不知道如何在新创建的jquery元素上触发拖动事件。

var drag= d3.behavior.drag()
   .on("drag", function(d) {
       // make a Clone html object .dragging-node

       $('.dragging-node').attr('draggable', true);
       $('.dragging-node').trigger('dragstart');

   });
var node = vis.selectAll("g.node")
            .data(nodes)
          .enter().append("svg:g")
            .attr("class", "node")
            .call(drag);

知道如何开始拖动这个新创建的克隆对象吗？或者有没有更明智的方法来获得我想要的东西？

任何帮助将不胜感激！

Answer 1

我曾做过类似的事情，并且它对于简单的东西来说还可以，但是经过一段时间后，很明显使用jQueryUI的Draggable更加健全，因为它更加强大。我还需要结合使用Droppable功能;也许你的需求要求不高。如果是这样的话：

您不需要人工触发克隆元素中的事件（在jQueryUI的可拖动术语中也称为“拖动助手”）。相反，让事件继续在启动拖动的元素上触发并应用拖动行为，但更新帮助器的位置。

这样的事情：

// Helper is the cloned element, which doesn't exist until dragging begins
// (alternatively it could pre-exist but be hidden)
var $helper = null

// the parent container of $helper, 
// which presumably is outside of the SVG
var $helperParent = $('body')

var drag = d3.behavior.drag()
  .on("dragstart", function(d) {
    $helper = ... // somehow make the cloned helper, on dragstart (not on drag)
      .appendTo($helperParent)
  })
  .on("drag", function(d) {
    // determine the mouse position relative to the helper's parent
    // (not relative to the SVG element that initiated the drag)
    mousepos = d3.mouse($helperParent[0])

    // update the helper's position
    $helper.css({
      left: mousepos[0],
      top: mousepos[1]
    });
  })
  .on("dragend", function(d) {
    // remove (or hide) the helper
    $helper.remove();
  });

将svg元素拖到HTML元素中

1 个答案: