拖放HTML 5 jQuery：使用JSON的e.dataTransfer.setData()

Question

这是我的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()
    });
},

我希望传递一些信息，比如id和text。我的下拉框如下：

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

但是数据未定义，我无法访问我的数据。这是正确的方法吗？

谢谢！

- Syl

---

这可能与这个有关吗？https://dev59.com/mWsz5IYBdhLWcg3w0bSl - ShivangiBilora

Answer 1

开始拖拽

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

掉落中

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

而且您将会得到

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

在 console.log 中

- Stupidfrog

---

然而，这样做会默认允许用户将JSON字符串拖放到任何<input/>元素上，这可能不是预期的行为。 - user2483352

如果有一种方法可以传递实际的JSON对象，那将更加方便。可惜你必须将其转换为字符串。 - Nic Scozzaro

Answer 2

如果您在dragstart函数中包含effectAllowed，例如：

e.dataTransfer.effectAllowed = 'move';

那么我的理解是，您需要在拖放函数中定义一个等效的dropEffect：

e.dataTransfer.dropEffect = 'move';

- lukejacksonn