JavaScript HTML DOM Event: dragend

The dragend event occurs when the user finishes dragging an element. Independent of whether the drop succeeded, this is the right place for state cleanup: remove visual classes (e.g., “is-dragging”, “is-over”), reset aria-grabbed, and clear target outlines.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dragend (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;
        }
        
        .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="Basic dragend example">
        <div class="inline">
            <div id="card" class="card" draggable="true" tabindex="0" aria-grabbed="false">
                Drag me (drop on target or outside)
            </div>
            <div id="zone" class="dropzone" role="region" aria-label="Target">
                Target: drop the card here
            </div>
        </div>
        
        <div class="inline">
            <button type="button" id="clear">Clear log</button>
            <button type="button" id="reset">Reset</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;
            }
            
            // Start dragging: set data and visual cue
            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");
            });
            
            // Allow dropping on the target (dragover must prevent default)
            zone.addEventListener("dragover", function(e) {
                e.preventDefault();
                zone.classList.add("is-over");
            });
            
            // Drop: move the card into the target (demo purpose)
            zone.addEventListener("drop", function(e) {
                e.preventDefault();
                var data = e.dataTransfer.getData("text/plain");
                if (data === "CARD") {
                    zone.appendChild(card);
                    write("drop: card dropped into target");
                }
                zone.classList.remove("is-over");
            });
            
            // END OF DRAGGING - CLEAN UP (regardless of drop success)
            card.addEventListener("dragend", function() {
                card.classList.remove("is-dragging");
                card.setAttribute("aria-grabbed", "false");
                zone.classList.remove("is-over");
                write("dragend: state cleanup (remove visual classes, reset aria)");
            });
            
            // Buttons
            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: card returned to start");
            });
        })();
    </script>
</body>
</html>
RESULT