在HTML5 DND中，将application/json设置为dragstart期间的数据

Question

我观察到HTML5DND中的JSON数据将被转换为字符串的设置。除了字符串化之外，还有其他传递JSON数据的替代方案和最佳实践吗。

// During drag enter
event.dataTransfer.setData('application/json', {
id: 1
});

// During Drop data is printing as object
let data = event.dataTransfer.getData('application/json');
// printing [object Object]

Answer 1

DataTransfer.setData((没有其他选择，因为它的data(第二个(参数是DOMString。

DataTransfer有一个替代方案——DataTransferItem；然而，使用它将涉及到对对象进行字符串化(将其打包到mimetype JSON的Blob中(。

Answer 2

如果我的另一个答案不能回答您的问题，请尝试将对象头像拖放到文本区域。

const object_1 = {id: 1}
const object_2 = {id: 2}
const p_1 = document.body.appendChild(document.createElement("p"))
const p_2 = document.body.appendChild(document.createElement("p"))
p_1.innerText = "object_1"
p_1.draggable = true
p_2.innerText = "object_2"
p_2.draggable = true
p_1.ondragstart = function () {
event.dataTransfer.setData("text", "object_1")
}
p_2.ondragstart = function () {
event.dataTransfer.setData("text", "object_2")
}
const textarea = document.body.appendChild(document.createElement("textarea"))
textarea.ondrop = function() {
event.preventDefault()
this.innerText = eval(event.dataTransfer.getData("text")).id
}