JavaScript HTML DOM Events: dragover

The dragover event fires when a dragged item hovers over a target element. The crucial step is event.preventDefault() – without it the drop on the target will not work. You can also set dataTransfer.dropEffect (e.g., “move”, “copy”) to indicate to the user what will happen on drop.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>dragover (basic)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <style>
        *, *::before, *::after { 
            box-sizing: border-box; 
        }
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
        }
        .wrap { 
            max-width: 100%; 
            margin: 20px auto; 
            padding: 16px; 
            border: 1px solid; 
            border-radius: 8px; 
        }
        .card {
            padding: 12px;
            border: 1px solid;
            border-radius: 8px;
            cursor: grab;
            user-select: none;
        }
        .card:focus-visible {
            outline: 2px solid #60a5fa;
            outline-offset: 2px;
            border-color: #60a5fa;
        }
        .card.is-dragging {
            cursor: grabbing;
            opacity: 0.92;
            border-color: #2563eb;
            outline: 2px dashed #93c5fd;
            outline-offset: 3px;
        }
        .log {
            margin: 14px auto 0;
            padding: 8px 10px;
            border: 1px solid;
            border-radius: 8px;
            font: 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
            white-space: pre-wrap;
            min-height: 44px;
            max-height: 140px;
            overflow: auto;
        }
        button {
            font: inherit;
            padding: 8px 12px;
            border: 1px solid;
            border-radius: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="card" class="card" draggable="true" tabindex="0" aria-grabbed="false">
            Drag me (dragstart sets data and visual cue)
        </div>

        <div style="margin-top:12px">
            <button type="button" id="clear">Clear log</button>
        </div>
    </div>

    <pre id="log" class="log" aria-live="polite"></pre>

    <script>
        (function(){
            var card = document.getElementById("card");
            var log  = document.getElementById("log");
            var clr  = document.getElementById("clear");

            function write(msg){
                var t = new Date().toLocaleTimeString();
                log.textContent += "[" + t + "] " + msg + "\n";
                log.scrollTop = log.scrollHeight;
            }

            card.addEventListener("dragstart", function(e){
                e.dataTransfer.setData("text/plain", "CARD");
                e.dataTransfer.effectAllowed = "move";
                card.classList.add("is-dragging");
                card.setAttribute("aria-grabbed", "true");
                write("dragstart: setData('CARD'), effectAllowed=move");
            });

            card.addEventListener("dragend", function(){
                card.classList.remove("is-dragging");
                card.setAttribute("aria-grabbed", "false");
                write("dragend: cleaned up state");
            });

            clr.addEventListener("click", function(){ log.textContent = ""; });
        })();
    </script>
</body>
</html>

RESULT

Drag one of the cards (A–D) into the target area on the right.
On dragstart the dataTransfer (text/plain with the card ID) is set and the card gets a visual “dragging” cue.
During dragover you call event.preventDefault() (this enables drop) and suggest a dropEffect:
1. without modifiers: move,
2. with Ctrl or ⌘ (Meta): copy.
dragenter/dragleave add/remove a subtle highlight on the target (visual feedback).
On drop the card:
1. moves (move) into the target, or
2. copies (copy) if you hold Ctrl/Meta while dropping.
The “Clear log” button empties the output, and “Reset” refreshes the demo (returns everything to its initial state).

Card A

Card B

Card C

Card D

Target: hover over me (dragover) and drop me (drop)

Hint: hold Ctrl for suggested copy, otherwise move.