拖动一个 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

这是一个简单的例子，使用 css position:absolute 移动一个 div 并根据拖动修改顶部和左侧的偏移量。

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

Fiddle