1. Overview

• Pointer Events unify mouse, touch, and pen input under one API.
• Useful for building custom drag-and-drop without HTML5 Drag API.

2. Key Events

1. pointerdown
   • Fired when a pointer (mouse/touch/pen) makes contact.
2. pointermove
   • Fired when the pointer moves while in contact.
3. pointerup
   • Fired when the pointer is lifted.
4. pointercancel
   • Fired when the system cancels tracking (e.g. context menu, gesture).

3. Pointer Capture

• elem.setPointerCapture(pointerId)

  Locks all subsequent pointermove/up events to elem, even if the pointer leaves the element.

• elem.releasePointerCapture(pointerId)

  Releases the capture.

4. Basic Drag Flow

1. Start
   • On pointerdown, record starting position (startX, startY) and call setPointerCapture.
2. Move
   • On pointermove, calculate delta (dx = event.clientX – startX, etc.) and update element position (e.g. via style.transform).
3. End
   • On pointerup or pointercancel, release capture and finalize state (e.g. drop logic).

5. Example Snippet

const box = document.getElementById('box');
let startX, startY;

box.addEventListener('pointerdown', e => {
  startX = e.clientX - box.offsetLeft;
  startY = e.clientY - box.offsetTop;
  box.setPointerCapture(e.pointerId);
});

box.addEventListener('pointermove', e => {
  if (e.pressure === 0) return; // no contact
  const x = e.clientX - startX;
  const y = e.clientY - startY;
  box.style.transform = `translate(${x}px, ${y}px)`;
});

box.addEventListener('pointerup', e => {
  box.releasePointerCapture(e.pointerId);
  // Optionally: snap to grid, trigger drop event, etc.
});

box.addEventListener('pointercancel', e => {
  box.releasePointerCapture(e.pointerId);
  // Handle cancellation if needed
});

6. Tips

• Always call setPointerCapture in pointerdown to ensure smooth dragging.
• Use event.clientX/Y for coordinates relative to viewport.