drag-patterns

What problem does it solve?

This Skill solves flaky, broken, or jittery drag behavior in Vue components caused by fast pointer movement, event listener scope, and coordinate math mismatches inside transformed containers.

Core Features & Use Cases

• Window-level drag listeners: Prevent drags from dying when the cursor leaves the element by wiring mousemove/mouseup on window.
• Clean separation of cleanup vs state reset: Avoid wiping reactive drag state by ensuring listener removal and state resetting are independent.
• Pointer-events kill switch during drag: Stop nested elements from intercepting pointer events mid-gesture via a .dragging CSS class.
• Screen-pixel drag math with deferred conversion: Track movement in clientX/clientY pixels and convert to fractions/percentages only when persisting.
• Overlay positioning that survives zoom and resize: Use percentage-based overlay positioning inside CSS-transformed containers.
• Async race guards: Prevent stuck state from async reloads and avoid rendering overlays before image natural dimensions are known.
• Practical integration guidance: Targets real production touchpoints like image tag overlays, chart pan/zoom, resizable column splitters, and panel resizers.

Quick Start

Use the drag-patterns guidance to implement your Vue drag interaction by attaching temporary mousemove/mouseup handlers to window, disabling pointer-events during the drag, and saving positions only after converting from screen pixels.