Example ondragover and drop event handlers from MDN, modified
This drag-and-drop example uses the same event handlers as shown in
the MDN web docs section "HTML Drag and Drop API—The Basics",
except that the ondragover and ondrop handlers are attached to the document body
instead of being attached to descendent elements.
(See also Drag Operations.)
It shows how to:
Some extra elements have been added to experiment with the ondragstart,
ondragover, and ondrop properties.
define a draggable element by putting a draggable attribute in the element's HTML
tag and attaching a dragstart handler to it;
define a drag data item, which the example uses to identify the dragged element;
define the drag effect as a move operation; and
define a drop zone to be the whole web page by attaching an ondrop handler and
an ondragover handler to the document body.
This DIV element has no draggable attribute.
The web browser gives no indication that it can be dragged.
This P element has a draggable attribute and a dragstart handler.
This P element has a draggable attribute, but
no drag effect is defined for it because it has no dragstart handler.
This P element has ondrop and ondragover handlers.
Two ondrop handlers are called when an element is dropped on it:
first, the one specific to it, then the one for the whole body.
This P element has an ondrop handler. It has no ondragover handler.
Elements can nevertheless still be dropped on it because the whole body is a drop zone.
DIV 0, DIV 1, and DIV 2 are draggable
no drag effect is defined for them because they have no dragstart