Example ondragover and drop event handlers from MDN with 'copy' effect

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". 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 copy operation; and
  4. define a drop zone by putting ondrop and ondragover attributes in an element's HTML tag.
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.

Drop Zone—This P element has ondrop and ondragover handlers.

Broken Drop Zone—This P element has an ondrop handler, but it doesn't work as a drop zone because it has no ondragover handler.

Drop Zone—This P element has ondrop and ondragover handlers.

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