Here's a list of key points for HTML5 drag and drop API

Drop event not fired

You need to preventDefault in dragover event

Make only header draggable

Set <header draggable="true">. Now the drag image may not be what you want. You can set another element as drag image: dataTransfer.setDragImage(el.parentElement, xOffset, yOffset)

Cannot get dataTransfer in dragover event

That's correct. You cannot get data in dragenter, dragover event for chrome. You can only know types(keys) for the dataTransfer. You can use a unique type and verify the data using: new Set(dataTransfer.types).has(UNIQUE_MIME)