react-draggable-wrapper
React draggable wrapper component encapsulating the HTML5 Drag and Drop APIs.
HTML5 Drag and Drop
Refer: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
How to use
Import the module from here
import DraggableWrapper from 'react-draggable-wrapper';
Wrap any React component which requires Drag and Drop feature by DraggableWrapper
.
<DraggableWrapper
id={...}
handleDragStart={...}
handleDrop={...}
handleDragOver={...}
>
<div> drag me </div>
</DraggableWrapper>
API reference
Props
Following props main props are accepted
Prop | Type | Usage | Default |
---|---|---|---|
id | any |
Uniquely identify a dragging element | 0 |
isDraggable | boolean |
Allow drag and drop | true |
handleDragStart | function: (event, id) => {...} |
Will trigger at onDragStart
|
- |
handleDrop | function: (event, id) => {...} |
Will trigger at onDrop
|
- |
handleDragOver | function: (event, id) => {...} |
Will trigger at onDragOver
|
- |
handleDragEnter | function: (event, id) => {...} |
Will trigger at onDragEnter
|
- |
handleDragLeave | function: (event, id) => {...} |
Will trigger at onDragLeave
|
- |
handleDragExit | function: (event, id) => {...} |
Will trigger at onDragExit
|
- |
handleDragEnd | function: (event, id) => {...} |
Will trigger at onDragEnd
|
- |
Other than above main props, additional props such as style
, data-id
can be passed to the wrapper.
Example
A reference implementation of a row drag and drop is provided here. Below is a screen casting of the application.