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:
  1. define a draggable element by putting a draggable attribute in the element's HTML tag and attaching a dragstart handler to it;
  2. define a drag data item, which the example uses to identify the dragged element;
  3. define the drag effect as a move operation; and
  4. define a drop zone to be the whole web page by attaching an ondrop handler and an ondragover handler to the document body.
Some extra elements have been added to experiment with the ondragstart, ondragover, and ondrop properties.
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, but no drag effect is defined for them because they have no dragstart handlers.
DIV 0
DIV 1
DIV 2