Drag and Drop

Reflex Enterprise provides comprehensive drag and drop functionality for creating interactive UI elements using the rxe.dnd module. Built on top of react-dnd, it offers both high-level components for common use cases and low-level hooks for advanced scenarios.

Here's a basic example showing how to create a draggable item and drop target:

Create a draggable item that can be moved between multiple drop targets:

Access drag and drop state information using collected parameters:

Create dynamic draggable lists using rx.foreach. Always pass a stable item identifier as the key prop to the outermost component rendered by the foreach to ensure item identity is trackable as the item in the underlying list is rearranged.

The rxe.dnd.draggable component makes any element draggable:

Key Properties:

• type: String identifier for drag type matching
• item: Data object passed to drop handlers
• on_end: Called when drag operation ends

The rxe.dnd.drop_target component creates areas that accept draggable items:

Key Properties:

• accept: List of drag types this target accepts
• on_drop: Called when item is dropped
• on_hover: Called when item hovers over target

Access real-time drag/drop state:

Draggable Parameters (rxe.dnd.Draggable.collected_params):

• is_dragging: Boolean indicating if item is being dragged

Drop Target Parameters (rxe.dnd.DropTarget.collected_params):

• is_over: Boolean indicating if draggable is hovering
• can_drop: Boolean indicating if drop is allowed

Creates a draggable component that can be moved around the interface.

Parameters:

• type (str, required): String identifier that must match the accept list of drop targets
• item (dict | Callable): Data object passed to drop handlers. Can be a static dictionary or a function that receives a DragSourceMonitor and returns data
• preview_options (dict): Configuration for the drag preview appearance
• options (dict): Additional drag source options like dropEffect
• on_end (EventHandler): Event handler called when drag operation completes
• can_drag (Callable): Function that determines if the item can be dragged
• is_dragging (Callable): Function to override the default dragging state detection
• collect (Callable): Function to collect custom properties from the drag monitor

Creates a drop target that can receive draggable items.

Parameters:

• accept (str | list[str], required): Drag type(s) this target accepts
• options (dict): Additional drop target configuration options
• on_drop (EventHandler): Event handler called when an item is dropped, receives the item data
• on_hover (EventHandler): Event handler called when an item hovers over the target
• can_drop (Callable): Function that determines if a specific item can be dropped
• collect (Callable): Function to collect custom properties from the drop monitor

Provides information about the drag operation state:

• is_dragging(): Returns True if this item is currently being dragged
• can_drag(): Returns True if the item can be dragged
• get_item(): Returns the item data being dragged
• get_item_type(): Returns the drag type string
• get_drop_result(): Returns the drop result (available in on_end)
• did_drop(): Returns True if the item was successfully dropped

Provides information about the drop target state:

• is_over(): Returns True if a draggable item is hovering over this target
• can_drop(): Returns True if the hovering item can be dropped
• get_item(): Returns the item data of the hovering draggable
• get_item_type(): Returns the drag type of the hovering item

The item parameter allows you to pass data from draggable components to drop handlers:

The collect parameter allows you to access drag and drop state information in real-time:

Drag and drop functionality requires the rxe.dnd.provider component to wrap your app. The provider is automatically added when using draggable or drop_target components.

For manual control:

1. Always use @rx.memo on functions containing draggable components
2. Use descriptive type names for better debugging
3. Handle edge cases in drop handlers (invalid items, etc.)
4. Provide visual feedback using collected parameters
5. Test on mobile devices with touch backend
6. Keep item data lightweight for better performance

← Back to main documentation