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

Posted 2023-05-08

【中文标题】如何在html拖放中设置自定义数据

【英文标题】：How to set custom data on html drag and drop

【发布时间】：2018-09-26 23:13:21

【问题描述】：

我正在尝试在我的拖动事件中设置一个自定义数据，它是一个 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 的 reference 表示可以使用自定义数据

【问题讨论】：

您到底想要什么？您想在拖放过程中传输数据吗？

@TanDuong 是的。和数据是和HTMLElement。但是没有数据类型。我试图做'application/json'，但结果我得到了[object HTMLElement]

【参考方案1】：

根据这个MDN reference，可以指定数据类型text/html，并传递一个格式良好的HTML字符串。如果要使用 DOM 中的现有元素，可以传递其 outerHTML 字符串属性。

【讨论】：

但是如果我使用outerHTML会失去参考

@bobharley 据我所知on MDN，Firefox 可能提供拖放节点引用的功能。我不知道还有哪些其他浏览器（如果有的话）也支持该功能。