react-draggable-wrapper

HTML5 Draggable wrapper for React


Keywords
React, HTML5, WebAPIs, DragNDrop
License
MIT
Install
npm install react-draggable-wrapper@1.0.1

Documentation

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.

Row and Drop