无法调用未定义的方法“setData”

Question

编辑 1

使用 dataTransfer.setData 方法使其工作！

http://jsfiddle.net/UH7Sf/1/

d3.event.dataTransfer.setData('type',type);  

---

我在使用 d3.event 中的 setData 和 getData 方法时遇到问题

我必须在顶部使用一个可拖动的 img 元素进行 div 分割，并在第二个使用一些拖放功能。

d3.select('img').on('dragstart', function() { 
    var type = d3.select(this).attr('type');
    console.log("Drag starts with "+ type);
d3.event.transfer.setData('type',type);    
});

d3.select('.drop').on('drop', function() {
    d3.event.preventDefault();
    var type = d3.event.transfer.getData('type');
    console.log("Drag ends with "+ type);      
});

d3.select('.drop').on('dragover', function() {
    d3.event.preventDefault();
});

这里是小提琴：http://jsfiddle.net/UH7Sf/

还有另一种使用 d3 的解决方案（在拖放中传输数据）？

Answer 1

event 内部没有名为transfer 的对象。您可以做的一件事是尝试event.setData()，但我认为这也不是您想要的，因为 dragstart 和 drop 事件是两个不同的事件对象。

您可以改为使用单独的局部变量。例如

var draggedType = null; 

d3.select('img').on('dragstart', function() { 
    var draggedType = d3.select(this).attr('type');
    console.log("Drag starts with "+ draggedType);
});

d3.select('.drop').on('drop', function() {
    d3.event.preventDefault();
    console.log("Drag ends with "+ draggedType);
    // do something with draggedType here

    draggedType = null; // reset draggedType to null when done, just in case
});