拖动 div 并查看项目移动

Question

现在我正在尝试实现拖放功能。

我有这个。

var drag = d3.behavior.drag();
  drag.on('drag', function () {
    console.log("drag start");
  })
  drag.on('dragend', function () {
    console.log("drag stop");
  })

  selection = d3.select('.right.menu');
  selection.call(drag);

有效，但现在我想看到 div 在屏幕上移动，现在我只得到控制台，如何做到这一点，或者更好的是关于如何使用此方法/事件的任何指导被命名做一些研究会很棒。

更新

当前解决方案。

var drag = d3.behavior.drag();
  drag.on('drag', function () {
console.log(selection);
    selection.style("left", d3.event.x+"px").style("top", d3.event.y+"px").style("position", "inherit");
  })
  drag.on('dragend', function () {
    console.log("drag stop");
  })

  selection = d3.select('.right.menu')
  selection.call(drag);

Answer 1

下面是一个使用cssposition:absolute移动div并根据拖动修改顶部和左侧偏移的简单示例。

appdiv.style("left", d3.event.x+"px").style("top", d3.event.y+"px");

Fiddle

拖动 div 并查看项目移动

Drag a div and see the item moving

javascript

drag-and-drop

drag

d3.js