如何在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 的参考说可以使用自定义数据

Answer 1

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