使用 d3.behavior.drag() 时，拖拽上的重影图像消失

Question

我需要拖动一个表格单元格并在拖动时在鼠标指针下显示其幻影。该表完全由 d3.js 生成。当我在适当的单元格上将可拖动属性设置为 true 时，重影图像会按预期显示。

 rows
    .append("td")
    .text(function (d) {return d.name;})      
    .attr('draggable', 'true');

但是由于我还需要拖动来影响页面上的其他元素（设置不同的样式、过滤器选择等），所以我调用 d3.behavior.drag() 并实现了 dragstart、drag 和 dragend 函数。

.call(d3.behavior.drag()
   .on('dragstart', function () {
      d3.select(this)
         .classed('dragged', true)
         .style('font-style', 'italic')
         .style('color', 'grey');
   })
   .on('drag', function () {
      d3.select('#drop-target')
         .style('background-color', 'green');
   })
   .on('dragend', function () {
      d3.select(this)
         .classed('dragged', false)
         .style('font-style', 'normal')
         .style('color', 'black');
      d3.select('#drop-target')
         .style('background-color', 'yellow');
   })
);

问题是 d3.behavior.drag() 似乎覆盖了幻像的创建，现在没有元素被拖动的视觉队列。我究竟做错了什么？

这是一个小提琴：http://jsfiddle.net/00drii/5p3dqx62/1/

Answer 1

不要将侦听器注册到drag behavior，而是将其添加到选择中。

rows.append('td').html(function (d) {
     return d.type;
 })
     .style('font-style', 'italic');
 rows.append('td').text(function (d) {
     return d.name;
 })
     .attr('draggable', 'true')

     .on('dragstart', function () {
     d3.select(this)
         .classed('dragged', true)
         .style('font-style', 'italic')
         .style('color', 'grey');
 })
     .on('drag', function () {
     d3.select('#drop-target')
         .style('background-color', 'green');

 })
     .on('dragend', function () {
     d3.select(this)
         .classed('dragged', false)
         .style('font-style', 'normal')
         .style('color', 'black');
     d3.select('#drop-target')
         .style('background-color', 'yellow');

 });

工作代码here

希望这会有所帮助！