drag-and-drop

Drag-and-drop interactions use @atlaskit/pragmatic-drag-and-drop to bind draggable elements, define drop targets, detect edges, and render previews. Set up draggable items with refs, bind drop targets with data, implement onGenerateDragPreview for custom previews, and use ref-based volatile state to track the closest edge for reordering without performance issues.

Use a volatile state pattern with refs to manage drag state instead of component state, ensuring handlers don't re-register. Wrap handler functions in useCallback with stable dependencies to prevent unnecessary re-renders and maintain consistent drag performance across interactions.

Edge detection determines the drop position by calculating the closest edge relative to the drop target. Pragmatic-drag-and-drop provides mechanisms to track edge proximity and render visual indicators—like insertion lines—to show users exactly where items will reorder before they release.

Yes, implement onGenerateDragPreview to render a custom drag preview that displays as users drag. This lets you show a styled copy of the item, icon, or custom visual feedback, improving user experience and clarity about what's being moved.

Draggable setup requires importing APIs from @atlaskit/pragmatic-drag-and-drop, creating refs for the item and drag handle, binding with dropTargetForElements, and attaching item data. This prepares elements for drag interactions and connects them to drop zones.

Avoid unnecessary re-renders by using refs for volatile drag state and useCallback for stable handler callbacks. Keep state updates minimal during drag operations and ensure drop target bindings remain consistent to maintain responsive interactions on complex lists and kanban boards.