Drag and Drop API keynotes

dropzone.addEventListener('dragover', function handleDragOver(e) {

// The `dropzone` element must have both `dragover` and `drop` event

// Remember to preventDefault the behavior or the browser or it will not let you drop anything inside

e.preventDefault()

e.dataTransfer.dropEffect = 'move'

})

dropzone.addEventListener('drop', function handleDrop(e) {

// NOTE: there must be a handler for dragover to use drop event

e.preventDefault()

// Use `e.dataTransfer.getData` method to retrieve drag's data and process them

const data = e.dataTransfer.getData('text/plain')

// NOTE: Keep mind that we can only use the `dataTransfer.getData()` in the `drop-handler`

// `getData()` will return empty string inside handle dragover or dragenter

})