Keep the grab offset

A dragged element stays glued to the exact point where it was grabbed.

From apple-design, §2 Direct manipulation.

Grab a corner, keep the corner

Grab each card near a corner and drag.

Recenters on grabBad
x = e.clientX − width / 2–
Grab offset keptGood
grabOffset = (–, –)–

Keep tracking off the edge

With a mouse, drag each knob fast, off the track.

Listens on knob onlyBad

20 · lost 0

knob.onpointermove = move
setPointerCaptureGood

20 · lost 0

knob.setPointerCapture(e.pointerId)

Velocity from a short history

Throw each puck. Then drag, hold still, release.

Last two eventsBad
v = (x₁ − x₀) / (t₁ − t₀)–
Windowed historyGood
samples within 100 ms of release–

Why it matters, pros and cons

Why it matters

The element is under your finger. A jump on grab says you steer a proxy.

Pros

  • Nothing moves on pointer-down.
  • Capture makes a small knob forgiving.
  • History gives honest release velocity.

Cons

  • Capture stops hover events elsewhere until release.
  • touch-action: none only on the handle.
  • Too long a window blurs a late flick.