HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>setPointerCapture outside</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; min-height: 200vh; }
    #track { position: relative; width: 90%; height: 60px; background: #f3f4f6; border-radius: 8px; margin: 40px 0; }
    #handle { position: absolute; top: 10px; left: 20px; width: 40px; height: 40px; background: #7c3aed; border-radius: 8px; touch-action: none; cursor: grab; }
  </style>
</head>
<body>
  <p>Drag the purple handle — move outside the gray track; capture keeps events flowing.</p>
  <div id="track"><div id="handle"></div></div>
  <script>
    var handle = document.getElementById("handle");
    var offsetX = 0;
    handle.addEventListener("pointerdown", function (ev) {
      offsetX = ev.clientX - handle.offsetLeft;
      handle.setPointerCapture(ev.pointerId);
    });
    handle.addEventListener("pointermove", function (ev) {
      if (!handle.hasPointerCapture(ev.pointerId)) return;
      handle.style.left = (ev.clientX - offsetX) + "px";
    });
    handle.addEventListener("pointerup", function (ev) {
      handle.releasePointerCapture(ev.pointerId);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.setPointerCapture — drag outside (Try It)