JavaScript HTML DOM Dogodki: dragend

Dogodek dragend se zgodi, ko uporabnik zaključi vlečenje elementa. Neodvisno od tega, ali je bil spust uspešen, je to pravo mesto za čiščenje stanja: odstrani vizualne razrede (npr. “is-dragging”, “is-over”), ponastavi aria-grabbed in obrobe ciljev.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="UTF-8">
  <title>dragend (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;
    }

    .inline {
      display: flex;
      align-items: stretch;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .card {
      width: 220px;
      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;
    }

    .dropzone {
      flex: 1 1 260px;
      min-height: 120px;
      padding: 12px;
      border: 1px solid;
      border-radius: 8px;
    }

    .dropzone.is-over {
      border-color: #16a34a;
      outline: 2px solid #86efac;
      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: 160px;
      overflow: auto;
    }

    button {
      font: inherit;
      padding: 8px 12px;
      border: 1px solid;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>
    <div class="wrap" aria-label="Osnovni dragend primer">
        <div class="inline">
            <div id="card" class="card" draggable="true" tabindex="0" aria-grabbed="false">
                Povleci me (spusti na cilj ali izven)
            </div>
            <div id="zone" class="dropzone" role="region" aria-label="Cilj">
                Cilj: spusti kartico sem
            </div>
        </div>
        
        <div class="inline">
            <button type="button" id="clear">Počisti log</button>
            <button type="button" id="reset">Ponastavi</button>
        </div>
    </div>
    
    <pre id="log" class="log" aria-live="polite"></pre>
    
    <script>
        (function() {
            var card = document.getElementById("card");
            var zone = document.getElementById("zone");
            var logEl = document.getElementById("log");
            var clear = document.getElementById("clear");
            var reset = document.getElementById("reset");
            
            function write(msg) {
                var t = new Date().toLocaleTimeString();
                logEl.textContent += "[" + t + "] " + msg + "\n";
                logEl.scrollTop = logEl.scrollHeight;
            }
            
            // Začetek vlečenja: nastavi podatke in vizualni namig
            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");
            });
            
            // Dovoli spust na cilju (dragover mora imeti preventDefault)
            zone.addEventListener("dragover", function(e) {
                e.preventDefault();
                zone.classList.add("is-over");
            });
            
            // Spust – premakni kartico v cilj (za prikaz)
            zone.addEventListener("drop", function(e) {
                e.preventDefault();
                var data = e.dataTransfer.getData("text/plain");
                if(data === "CARD") {
                    zone.appendChild(card);
                    write("drop: kartica spuščena v cilj");
                }
                zone.classList.remove("is-over");
            });
            
            // KONEC VLEČENJA – ČIŠČENJE (ne glede na uspešnost drop)
            card.addEventListener("dragend", function() {
                card.classList.remove("is-dragging");
                card.setAttribute("aria-grabbed","false");
                zone.classList.remove("is-over");
                write("dragend: čiščenje stanja (odstrani vizualne razrede, ponastavi aria)");
            });
            
            // Gumbi
            clear.addEventListener("click", function() { logEl.textContent = ""; });
            
            reset.addEventListener("click", function() {
                var inline = document.querySelector(".inline");
                if(card.parentElement !== inline) {
                    inline.insertBefore(card, inline.firstElementChild);
                }
                card.classList.remove("is-dragging");
                card.setAttribute("aria-grabbed","false");
                zone.classList.remove("is-over");
                write("reset: kartica vrnjena na izhodišče");
            });
        })();
    </script>
</body>
</html>
REZULTAT