HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>ondragover — preventDefault comparison</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}.drag-box{display:inline-block;padding:1rem 1.25rem;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;cursor:grab;user-select:none;max-width:420px}.drag-box:active{cursor:grabbing}.zones{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;max-width:640px}.drop-zone{flex:1 1 240px;padding:1.25rem;border:2px dashed #94a3b8;border-radius:8px;background:#f1f5f9;min-height:4rem}.drop-zone.blocked{border-color:#fca5a5;background:#fef2f2}.drop-zone.allowed{border-color:#86efac;background:#f0fdf4}.drop-zone.over{outline:2px solid #3b82f6;outline-offset:2px}.label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}.blocked .label{color:#b91c1c}.allowed .label{color:#15803d}.status{margin-top:1rem;padding:.75rem 1rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:.8125rem;max-width:640px}</style>

</head>

<body>

  <h1>preventDefault in dragover</h1>

  <p>Drag the box over each zone. Only the right zone calls preventDefault — drop works there.</p>

  <div class=drag-box draggable=true>Drag me to both zones</div>

  <div class=zones>

    <div class="drop-zone blocked" id=noPrevent>

      <div class=label>No preventDefault</div>

      Drop blocked

    </div>

    <div class="drop-zone allowed" id=withPrevent>

      <div class=label>With preventDefault</div>

      Drop allowed

    </div>

  </div>

  <div class=status id=status>Try dropping on each zone.</div>



  <script>var noPrevent=document.getElementById("noPrevent"),withPrevent=document.getElementById("withPrevent"),status=document.getElementById("status");noPrevent.addEventListener("dragover",(function(){status.textContent="Left zone: dragover without preventDefault — browser blocks drop."})),noPrevent.addEventListener("drop",(function(e){e.preventDefault(),status.textContent="Left zone: drop fired unexpectedly (should not happen without preventDefault in dragover)."})),withPrevent.addEventListener("dragover",(function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",withPrevent.classList.add("over"),status.textContent="Right zone: dragover with preventDefault — dropEffect is move; drop allowed."})),withPrevent.addEventListener("dragleave",(function(e){withPrevent.contains(e.relatedTarget)||withPrevent.classList.remove("over")})),withPrevent.addEventListener("drop",(function(e){e.preventDefault(),withPrevent.classList.remove("over"),status.textContent="Right zone: drop succeeded because dragover called preventDefault."}))</script>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML ondragover Attribute — preventDefault Comparison
