Drag & Drop HTML 5 jQuery: e.dataTransfer.setData() với JSON

Question

Dưới đây là dragstart tôi:

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

Tôi muốn vượt qua một số thông tin id và văn bản như vậy. Mức giảm của tôi là:

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

Nhưng dữ liệu chưa được xác định, tôi không thể truy cập dữ liệu của mình. Có đúng không?

Cảm ơn!

Answer 1

Nếu bạn bao gồm một effectAllowed chức năng dragstart của bạn, chẳng hạn như:

e.dataTransfer.effectAllowed = 'move'; 

Sau đó, nó là sự hiểu biết của tôi mà bạn cần phải xác định một dropEffect tương đương trong hàm thả:

e.dataTransfer.dropEffect = 'move'; 

Answer 2

trong kéo bắt đầu

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

in drop

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

và u sẽ nhận được

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

trong console.log