Drag & Drop HTML 5 jQuery: e.dataTransfer.setData() con JSON

Question

aquí está mi dragstart:

dragstart: function(e) { 
    $(this).css('opacity', '0.5'); 
    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('application/json', { 
     id: $(this).attr('id'), 
     header: $('header', this).text() 
    }); 
}, 

me gustaría pasar algunas informaciones tales Identificación y texto. Mi caída es:

drop: function(e) { 
    var data = e.dataTransfer.getData('application/json'); 
    alert(data); 
    $(this).attr('id', data.id); 
    $('header', this).text(data.header); 
}, 

Pero los datos no están definidos, no puedo acceder a mis datos. ¿Es el camino correcto?

¡Gracias!

Answer 1

Si incluye un effectAllowed en su función dragstart, tales como:

e.dataTransfer.effectAllowed = 'move'; 

entonces es mi entendimiento de que es necesario definir un dropEffect equivalente en la función de caída:

e.dataTransfer.dropEffect = 'move'; 

Answer 2

en comienzo de arrastrar

var testjson = {name:"asd",tall:123}; 
e.dataTransfer.setData("text/plain",JSON.stringify(testjson)); 
e.dataTransfer.effectAllowed = "copy"; 

en la caída de

var data = e.dataTransfer.getData("text/plain"); 
console.log(JSON.parse(data)); 

yu conseguirá

Object {name: "asd", tall: 123} 

en console.log