Жесты и управление без мыши

Перетаскивание, snap-точки и свайп карточек.

Motionpointer capturedragswipeaccessibility

Когда использовать

Implement bounded pointer gestures with cancellation and keyboard alternatives.

Решения для реализации

  1. Use pointer capture during drag and clear the gesture on pointerup and pointercancel.
  2. Clamp display displacement and commit only after an explicit threshold. Keep the underlying data unchanged during a tentative drag.
  3. Set touch-action on the draggable surface only, leaving surrounding page scrolling native.
  4. Offer arrows or action buttons that achieve the same result without drag. Preserve accessible names and visible focus.

Как проверить результат

  • Leaving the hit area while captured does not strand the gesture.
  • Cancelled gestures return to a valid state.
  • Every drag-only result has an equivalent keyboard action.

Файлы

SKILL.mdcomponents/advanced-motion.tsx
WEBCRAFT © 2026Оригинальные исходники и интерактивные примерыMIT License