使用d3.behavior.drag（）時，拖動時的鬼影消失。

Question

我需要拖動一個表格單元格，並在拖動時在鼠標指針下顯示其重影。 該表完全由d3.js生成。 當我在適當的單元格上將draggable屬性設置為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');

 });

這里的工作代碼

希望這可以幫助！