JavaScript HTML DOM Dogodki: dragover

Dogodek dragover se sproži, ko vlečen predmet lebdi nad ciljnim elementom. Ključna točka je event.preventDefault() — brez tega drop na cilju ne bo deloval. Dodatno lahko nastaviš dataTransfer.dropEffect (npr. "move", "copy"), da nakažeš uporabniku, kaj se zgodi ob spustu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8" />
    <title>dragstart (osnovno)</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">
            Povleci me (dragstart nastavi podatke in vizualni namig)
        </div>
        
        <div style="margin-top:12px">
            <button type="button" id="clear">Počisti 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: čiščenje stanja");
            });
            
            clr.addEventListener("click", function(){ log.textContent = ""; });
        })();
    </script>
</body>
</html>

REZULTAT

Povleci eno izmed kartic (A–D) v ciljno območje na desni.
Ob dragstart se nastavi dataTransfer (text/plain z ID kartice) in kartica dobi vizualni namig “vlečenja”.
V dragover se pokliče event.preventDefault() (to omogoči drop) in predlaga se dropEffect:
1. brez tipk: move,
2. s Ctrl ali ⌘ (Meta): copy.
dragenter/dragleave dodata/odstranita nežen obris cilja (vizualni feedback).
Ob drop se kartica:
1. premakne (move) v cilj, ali
2. skopira (copy), če držiš Ctrl/Meta med spustom.
Gumb “Počisti log” izbriše izpis, “Ponastavi” osveži primer (vrne stanje na začetek).

Kartica A

Kartica B

Kartica C

Kartica D

Cilj: lebdi nad menoj (dragover) in me spusti (drop)

Namig: drži Ctrl za predlagan copy, sicer move.