drag-and-drop

What problem does it solve?

This Skill provides a practical pattern for building drag-and-drop interactions using Atlassit's pragmatic-drag-and-drop library. It covers draggable setup, drop targets, edge detection, drag previews, and volatile state patterns to avoid performance issues.

Core Features & Use Cases

• Draggable Setup: Setup draggable handles and initial data.
• Drop Targets: Define drop zones and data.
• Edge Detection & Preview: Determine drop edge and render previews.
• Volatile State Pattern: Use refs to manage volatile drag state to avoid re-registers; ensure useCallback for dependencies.
• Performance Guidance: Avoid unnecessary re-renders.
• Use Case: Kanban board reordering, sortable lists.

Quick Start

Follow the Basic Draggable Item Pattern:

• Import necessary APIs from @atlaskit/pragmatic-drag-and-drop
• Create DraggableItem component with refs for the item and drag handle
• Bind draggable with dropTargetForElements and manage item data
• Implement onGenerateDragPreview to render a custom drag preview
• Use a ref-based pattern to track closest edge and render indicators