ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget

ReactJS drag and drop functionality for mouse and touch devices.

Make something draggable:

import { DragDropContainer } from 'react-drag-drop-container';

<DragDropContainer>
    <div>Look, I'm Draggable!</div>
</DragDropContainer>

Set up a drop target:

import { DragDropContainer, DropTarget } from 'react-drag-drop-container';

<DragDropContainer targetKey="foo" >
    <div>Drag Me!</div>
</DragDropContainer>

<DropTarget targetKey="foo" >
    <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>

Wire up events and data on the DragDropContainer:

<DragDropContainer targetKey="foo" dragData={some object} onDragStart={some method} onDrop={some method}...>
    <div>Drag Me!</div>
</DragDropContainer>

dragData: Data to pass to the drop target.

onDragStart, onDrag, onDragEnd: Callbacks during the drag process. These are passed the dragData object set
above. onDrag and onDragEnd are also passed dropTarget (the DOM element we're currently over),
x, and y (current position).

onDrop: Callback that fires after a successful drop on a compatible target. It gets passed an event object that
contains all this:

{
    dropData: [whatever you put in the dropData prop for the DropTarget]
    dropElem: [reference to the DOM element being dragged]
    containerElem: [reference to the DragDropContainer DOM element]
    target: [reference to the DropContainer DOM element]
}

Wire up events and data in the DropTarget:

<DropTarget targetKey="foo" dropData={some object} onDragEnter={highlight method} onDragLeave={unHighlight} onHit={some function}>
    <p>Drop something on me</p>
</DropTarget>

dropData: Data to pass back to the DragDropContainer.

onDragEnter, onDragLeave, onHit: Callbacks that fire when a compatible DragDropContainer
passes over. onHit is when a compatible container is dropped on the target. These
are passed an event containing...

{
    dragData: [whatever you put in the dragData prop for the DragDropContainer]
    dragElem: [reference to the DOM element being dragged]
    containerElem: [reference to the DragDropContainer DOM element]
    target: [reference to the DropContainer DOM element]
}

Wrapper components for dragging an element and dropping it on a target.

  • Works on mouse and touch devices.

  • Can set it up to drag the element itself or drag a "ghost" node that
    represents the element.

  • Use prop targetKey to to identify compatible drag elements
    and targets.

  • Can specify drag handle(s) (if desired) with prop dragHandleClassName.

  • Can tell the element to return-to-base after dragging, or to stay where you put it. Removed in v 5.0.0. It now always returns to base after dragging.

  • Can constrain dragging to one dimension, horizontal or vertical.

  • Includes callback props for onStartDrag, onDragging, onEndDrag,
    and onDropped.

  • Data from the target element is included with the onDropped event triggered in
    the DragDropContainer.

Demo

To build the demo locally, run:

npm install
npm run launch

This should open the demo in a browser window on
localhost:8080.

This error means you're already running
something on port 8080:

events.js:160
      throw er; // Unhandled 'error' event

Installation

Install it in your project using npm:

npm install react-drag-drop-container --save

Usage

Set up Draggable Element

Wrap your element in a DragDropContainer:

import { DragDropContainer } from 'react-drag-drop-container';

<DragDropContainer>
    <span>Example</span>
</DragDropContainer>

The element should now be draggable.

Set up for dragging to a target

Add the data you want to send to the target when you drop the element on it:

<DragDropContainer dragData={{label: 'Example', id: 123}}>
	<span>Example</span>
</DragDropContainer>

Specify targetKey. This determines what dropTargets will accept your drag:

<DragDropContainer dragData={{label: 'Example', id: 123}} targetKey="foo">
	<span>Example</span>
</DragDropContainer>

Set up Target(s)

Wrap an element in a DropTarget, giving it the same targetKey as your draggable:

  import { DropTarget } from 'react-drag-drop-container';

  <DropTarget targetKey="foo">
      [some element or text]
  </DropTarget>

In DropTarget's parent, add handlers for the enter, leave, and drop events. For example:

  highlight(ev){
    this.setState({'highlighted': true})
  }

  unHighlight(ev){
 	this.setState({'highlighted': false})
  }
  
  dropped(ev){
    ... do something with event data ...
  }

Wire them up to DropTarget. In this example we are passing the "highlighted" state
to the child element, which we assume toggles some highlighted style.

  <DropTarget targetKey="foo" onDragEnter={this.highlight} onDragLeave={this.unHighlight} onHit={this.dropped}>
    <ChildElement highlighted=this.state.highlighted />
  </DropTarget>

DragDropContainer Props

Key Props

These are not required, but you'll almost always want to set them.

dragData

Data about the dragged item that you want to pass to the target. Default is empty object.

targetKey

Optional string to specify which DropTargets will accept which DragDropContainers.

Other Props

customDragElement

If a DOM node is provided, we'll drag it instead of the actual object (which
will remain in place).

Example:

let elem = <div class="drag_elem">Drag Me</div>;

<DragDropContainer customDragElement={elem}>

disappearDraggedElement

If true, then dragging an element causes it to disappear such that it takes up no space. Defaults to
false, so that the element space is still reserved while you are dragging it. Not compatible with
dragClone.

dragClone

If true, then the user appears to be dragging a copy of the original element (this is false by
default, so that the user appears to be dragging the element itself).

dragElemOpacity

Opacity of the element while it's dragging. (Sometimes you want to be able to see what's below the
element you're dragging.) Default is 0.9 (e.g. 90%).

dragHandleClassName

Class name for drag handle(s). Optional. If omitted, the whole thing is grabbable.

Tip: If you are using drag handles on an element that contains an image,
use <img draggable="false"... to prevent the browser from letting users
drag the image itself, which can be confusing.

noDragging

If true, dragging is turned off.

xOnly, yOnly

If true, then dragging is constrained to the x- or y direction, respectively.

zIndex

The z-index for the dragged item defaults to 1000 (so that it floats over the target).
If that doesn't work for you, change it here.

Callbacks

All optional; specify in props.

onDragStart(dragData)

Runs when you start dragging. dragData is whatever you passed in with
the dragData prop.

onDrag(dragData, currentTarget, x, y)

Runs as you drag. currentTarget is the DOM element you're currently dragging
over; x and y are the current position.

onDragEnd(dragData, currentTarget, x, y)

When you drop.

onDrop(dropData, dropTarget)

Triggered after a drop onto a compatible DropTarget. dropTarget is the DOM
element of the DropTarget you dropped on, and dropData
is an optional prop of DropTarget.

DropTarget Props

targetKey

Optional string to specify which DragDropContainers this target will accept.

dropData

Data to be provided to the DragDropContainer when it is dropped on the target.

DropTarget Callbacks

All optional; specify in props.

onDragEnter(e), onDragLeave(e), onHit(e)

The event e contains

{
    dragData: [whatever you put in the dragData prop for DragDropContainer]
    dragElem: [reference to the DOM element being dragged]
    containerElem: [reference to the DragDropContainer DOM element]
    sourceElem: [reference to the DOM element containing children of DragDropContainer]
}
Example: make the target "consume" the draggable

Use event.containerElem to hide or delete the original element after a successful
drop.

  dropped(ev){
      ev.containerElem.style.visibility = 'hidden';
  }

Development

To view locally, clone the repository then

$ npm run install
$ npm run build
$ npm run watch
The demo will run on http://localhost:8080/

File locations:

/src    Source code for components
/demo   Source code for demo
/lib/bundle.js  Transpiled output
/public   Demo files, compiled

GitHub