HTML and CSS Reference
In-Depth Information
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-
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) {
if (e.preventDefault) e.preventDefault();
return false;
Search WWH ::

Custom Search