Draggable
Draggable component is a utility that enables moving DOM elements with mouse or touch input. It supports constraining movement to an axis or within a container, specifying a drag handle, cloning the element during drag, adjusting cursor offset, setting a minimum drag distance, and grouping draggable items by scope.
Usage
To import and use the Draggable component in your application, use the following code snippet:
Demos
Explore the demos of the React Draggable component. Refer to this page.
Props
The following table outlines the props for the Draggable component:
| Name | Type | Default | Description |
|---|---|---|---|
| abort | string | string[] | - | Defines the child element selector which will prevent dragging of element. |
| clone | boolean | false | Determines if drag operations are performed on a duplicate element of the draggable element. |
| cursorAt | - | Defines the distance between the cursor and the draggable element when dragging. | |
| distance | number | 1 | Defines the minimum distance draggable element to be moved to trigger the drag operation. |
| dragArea | HTMLElement | string | - | Defines the parent element in which draggable element movement will be restricted. |
| dragDirection | - | Defines the axis to limit the draggable element drag path. The possible axis path values are
| |
| handle | string | - | Defines the child element selector which will act as drag handle. |
| isDragScroll | boolean | - | Defines the dragArea is scrollable or not. |
| scope | string | 'default' | Defines the scope value to group sets of draggable and droppable items. A draggable with the same scope value will be accepted by the droppable. |
Events
The following table outlines the events for the Draggable component:
| Name | Type | Description |
|---|---|---|
| helper | (args: HelperEvent) => HTMLElement | null | Defines the callback function for customizing the cloned element. |
| onDrag | (args: DragEvent) => void | Specifies the callback function for drag event. |
| onDragStart | (args: DragEvent) => void | Specifies the callback function for dragStart event. |
| onDragStop | (args: DragEvent) => void | Specifies the callback function for dragStop event. |