User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 323

console.log("dragstart");
e.dataTransfer.setData("text/plain" , "Payload

Landed" );
}
…

As you can see, the dataTransfer object has a method named setData() that
sets the type and value for the data that is sent along with the dragged item. Now (if you
weren't seeing it before), you should see the following events logged to JavaScript con-
sole:
dragstart
drag
dragenter
dragover
drag
…
dragleave
dragend
In the middle, you will see “dragover” and “drag” repeated many times as you drag
the item around.
You may notice one event is missing, the all-important drop ! The reason for this
is the dragover event has the odd behavior of resetting the drag-and-drop operation
when you are over the drop target, which has the consequence that the drop event never
fires. The dragenter and dragover events could be used to handle the drag-and-
drop operation, but in most circumstances you will want to trigger the drop event. What
you need to do then is cancel the default behavior of the dragover event. This is a
matter of calling the method preventDefault() on the event object that is passed
as a parameter into the dragOverHandler() function. Additionally, we will check
whether the default behavior has already been prevented, and we'll also return false from
the function, which is another way of telling the browser to ignore the default behavior
of the event. Both methods can be added in order to ensure the broadest browser support
for this instruction. Edit your code and add the following:
…
function dragOverHandler(e) {
console.log("dragover");
if (e.preventDefault) e.preventDefault();
return false;