Drag and Drop — the dragover trap

<div class="pg">
    <h1 class="pg-title">🎮 The drop that only happens if you ask for it</h1>
    <p class="pg-sub">
      Drag a card between the two columns. The toggle below controls whether the drop zone's
      <code>dragover</code> handler calls <code>event.preventDefault()</code> — the one line the
      browser is silently waiting for before it will ever fire <code>drop</code> on that element.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="allow" checked /><span class="switch"></span>
          <span>Call <code>preventDefault()</code> in <code>dragover</code></span>
        </label>
        <button class="btn ghost sm" id="reset">Reset board</button>
      </div>
      <p class="hint">Toggle it off, then try to drop a card — same code, same listener, no drop.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Drag a card across</div>
      <div class="board">
        <div class="col" id="col-todo" data-col="todo">
          <h3>Backlog</h3>
        </div>
        <div class="col" id="col-done" data-col="done">
          <h3>Done</h3>
        </div>
      </div>

<div class="counters">
        <div><div class="big-num" id="countOk">0</div><div class="lbl">Drops accepted</div></div>
        <div><div class="big-num" id="countRejected">0</div><div class="lbl">Drops rejected</div></div>
      </div>

<div class="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — drag a card into the other column.</span>
      </div>
      <p class="hint" id="hint">Right now the toggle is on, so <code>dragover</code> cancels the browser's default refusal and the drop will land.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.