Drag and Drop
Drag-and-drop is an intuitive interaction pattern that allows users to click and hold an element, move it across the interface, and release it at a target location. This interaction enhances user experience by providing a natural way to manipulate UI elements, reorder lists, transfer data between containers, and organize content.
Syncfusion® React provides two primary components and a coordinating context for implementing drag-and-drop functionality:
-
Draggable: Makes any DOM element draggable. -
Droppable: Defines drop target zones for draggable elements. -
DragDropcontext/provider: Coordinates communication between Draggable and Droppable components.
Usage
The Draggable and Droppable components are available in the @syncfusion/react-base package. This package and its base styles are automatically included as dependencies when you install any Syncfusion® React component package. Ensure the base styles are imported in your application when using Drag and Drop components.
Draggable
The Draggable component enables you to make DOM elements draggable within the application. It provides a wide range of configuration options to control and customize the drag behavior. To use the Draggable component in a React application, import Draggable from the @syncfusion/react-base package in your App.tsx.
The following example demonstrates a simple usage of the Draggable component, where the element can be dragged freely within the page.
Drag helper
The helper property of the Draggable component allows you to specify a custom visual element that appears when dragging begins. This is especially useful when creating a cloned drag preview or when you want a different visual representation of the dragged item.
The following example demonstrates a drag‑and‑sortable list scenario, where the Draggable component enhances interactivity by using a customizable drag helper.
Droppable
The Droppable component defines specific target areas where draggable elements can be dropped. It supports advanced configuration options such as scoping and filtering, allowing you to control which draggable elements are accepted by different drop zones. Additionally, the component provides event handlers like over, out, and drop to track drag interactions and manage drop‑related logic throughout the drag‑and‑drop workflow.
DragDrop context
To use the Droppable component effectively, both the Draggable and Droppable components must be wrapped inside the DragDrop context provider. The DragDrop context coordinates the interaction between draggable elements and their corresponding drop targets, ensuring that drag start, drag movement, and drop actions are handled consistently across the application.
The following example demonstrates how a draggable element can be dropped into a Droppable component:
Drag area
The drag area defines a specific region within the user interface where drag‑and‑drop interactions are permitted. By setting a drag area, you can restrict the movement of a draggable element so that it stays within the boundaries of the designated region. This behavior can be configured using the dragArea property of the Draggable component.
Drag direction
The Draggable component allows you to restrict the movement of a draggable element to a specific direction using the dragDirection property. This is useful in scenarios such as sliders, timelines, splitters, or any UI interaction where movement should be limited to a single axis.
Restrict dragging to:
-
Horizontal movement (x): Allows dragging only left and right. -
Vertical movement (y): Allows dragging only up and down.
Drag scoping
Drag scoping allows you to control which draggable elements are permitted to be dropped into specific drop zones. This is useful in complex user interfaces where items should only interact with designated areas. By assigning a scope value to both the Draggable and Droppable components, you can create precise, fine‑grained rules that determine valid drop targets.
The following example demonstrates how the scope property is used with the Draggable and Droppable components to manage where items can be dropped. In this demo, users can toggle between two different scopes, visually highlighting the active droppable area and updating the drop interactions accordingly.