1.0.1 • Published 4 years ago
react-draggable-wrapper v1.0.1
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.
