playbooks

home / skills / harborgrid-justin / lexiflow-premium / drag-and-drop-physics-engine

drag-and-drop-physics-engine skill

/frontend/.github-skills/drag-and-drop-physics-engine

This skill enables fluid drag-and-drop with physics-based animations, tracking pointer events, collisions, and spring-like reordering for responsive UIs.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill drag-and-drop-physics-engine

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
585 B
---
name: drag-and-drop-physics-engine
description: Implement fluid drag-and-drop interactions with physics-based animations.
---

# Drag-and-Drop Physics Engine

## Summary
Implement fluid drag-and-drop interactions with physics-based animations.

## Key Capabilities
- Track pointer events.
- Calculate layout collisions.
- Animate reordering with springs.

## PhD-Level Challenges
- Optimize collision detection.
- Handle nested scroll containers.
- Ensure accessibility.

## Acceptance Criteria
- Create a sortable list.
- Demonstrate fluid animations.
- Support keyboard sorting.

Overview

This skill implements fluid drag-and-drop interactions with physics-based animations for web interfaces. It provides pointer tracking, collision-aware layout updates, and spring-driven reordering so list items move naturally. The implementation also targets keyboard accessibility and supports nested scroll contexts for robust behavior.

How this skill works

The engine listens to pointer and keyboard events to pick up items and track movement. It computes collision regions against sibling elements and predicts target positions. Reordering and release animations use spring physics for smooth transitions and momentum. Edge cases include nested scrolling containers, layout shifts, and accessibility focus management.

When to use it

  • Creating sortable lists or kanban boards with natural movement
  • Improving perceived performance and polish in admin UIs
  • Implementing drag handles that must work across touch and mouse
  • Replacing janky CSS transitions with physics-driven animations
  • Supporting keyboard-first interactions for sortable content

Best practices

  • Debounce heavy collision checks and use spatial partitioning for large lists
  • Keep drag state shallow and immutable-friendly for easier updates
  • Use requestAnimationFrame for visual updates and cancel on release
  • Respect reduced motion preferences and allow disabling springs
  • Test in nested scroll containers and with assistive technologies

Example use cases

  • Sortable task lists in a premium legal management dashboard
  • Reorderable form fields in a dynamic document builder
  • Kanban columns where cards flow with momentum when dropped
  • Mobile-friendly touch drag with auto-scrolling within containers
  • Keyboard-driven reordering for users who cannot use a pointer

FAQ

Does this support keyboard sorting?

Yes. Keyboard events move focus and swap items, and release triggers the same spring animations as pointer interactions.

How does it handle nested scroll containers?

The engine detects scrollable ancestors and translates pointer coordinates to local plane coordinates, applying overscroll prevention and container-specific auto-scroll behavior.