Pointer Events — drag without losing the pointer

<div class="pg">
    <h1 class="pg-title">🎮 Drag without losing the pointer</h1>
    <p class="pg-sub">
      Grab the dot and move your mouse <strong>fast</strong> — flick it toward an edge.
      With capture off, the dot can get left behind mid-drag. Flip the toggle on and
      try the exact same flick: <code>setPointerCapture()</code> keeps it glued to you.
    </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="capture" /><span class="switch"></span>
          <span>Use <code>setPointerCapture()</code></span>
        </label>
        <button class="btn ghost" id="reset">Reset dot</button>
      </div>
      <p class="hint" id="modeHint">Capture is <strong>off</strong> — this is the bug. Drag fast and watch the dot get left behind.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="track" id="track">
        <div class="drag-dot" id="dot">●</div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot" id="statusDot"></span><span id="statusText">Ready — press and drag the dot.</span>
      </div>
      <p class="hint" id="hint">pointerType / pointerId show here once you start dragging.</p>
      <div class="output log" id="log"></div>
    </div>
  </div>

preview

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