如何在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字符串屬性。