Cannot call method 'setData' of undefined

Question

EDIT 1

Using the method dataTransfer.setData make it works !

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

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

---

I'm facing a issue using methods setData and getData within d3.event

I have to div with a draggable img element in the top one, and some drop capabilities on the second one.

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();
});

Here is the fiddle : http://jsfiddle.net/UH7Sf/

There is another solution to do this (transfering data within the drag&drop) using d3 ?

Answer 1

There is no object inside event called transfer . One thing you can do is try event.setData() , but I don't think that's what you want either, because the dragstart and drop events are two different event objects.

You can instead have a separate local variable to use. Eg

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
});