How to set custom data on html drag and drop

Question

I'm trying to set a custom data which is an HTML element on my drag event. So far I did this:

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
})

Is there a way to do this?

I already tried to do JSON.stringify on the element before passing it to the drag event. but JSON.stringify does not work on HTMLElement object

This reference from mdn says it is possible to use custom data

Answer 1

According to this MDN reference , you can specify the data type text/html and pass a well-formed HTML string. If you want to use an existing element in the DOM, you could pass its outerHTML string property.