如何在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
})

有办法做到这一点吗？

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

mdn的这个reference表示可以使用自定义数据

Answer 1

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