如何在HTML拖放中设置自定义数据

Question

我正在尝试在拖放事件中设置一个自定义数据，这个数据是一个HTML元素。目前我已经做了以下工作:

element.addEventListener('dragstart', event => {
  event.dataTransfer.setData('custom-data', document.querySelector('.the-element')
})

dropzone.addEventListener('drop', event => {
  const data = event.dataTransfer.getData('custom-data') // this is empty
})

有没有一种方法可以实现这个？

我已经尝试在将元素传递给拖动事件之前对其进行JSON.stringify，但是JSON.stringify不适用于HTMLElement对象。

这个参考文献来自mdn，它说可以使用自定义数据。

- bobharley

---

你想要什么？你想在拖放过程中传输数据吗？ - Tan Duong

@TanDuong 是的。数据类型是HTMLElement。但是没有对应的数据类型。我尝试使用'application/json'，但结果得到了[object HTMLElement]。 - bobharley

Answer 1

根据MDN参考文档，您可以指定数据类型text/html并传递格式良好的HTML字符串。如果您想使用DOM中的现有元素，则可以传递其outerHTML字符串属性。

- plohm12

---

但是如果我使用outerHTML，我将失去引用。 - bobharley

从我所看到的MDN上来判断，Firefox可能提供拖放节点引用的功能。我不知道其他浏览器是否也支持这个功能。 - plohm12