DragDropContainer

A simple component for dragging an element and dropping it on a target.

Works on mouse and touch devices.

Setup

npm install

And if you want to look at the demo page:

npm start

Then point your browser at http://localhost:3002/

Approach

• Wrap the draggable element in DragDropContainer.

• Use properties to specify custom event names for the drop, enter, and leave events.

• On target element(s), add listeners for the custom-named events, e.g. on the enter event you might highlight the target and then unhighlight on
  leave, and then of course you'll have some code to handle the drop event.

• Alternatively, if you don't like the custom-event-name approach, add listeners for the default events (see below) and then use the event.details to make sure that this is a draggable item you're interested in.

Example

Drag container:

<h1>Drag the Bananas to the Monkey</h1>
<DragDropContainer
    dragData={ data about the bananas that you want to pass on to the monkey }
    dragEnterEventName="bananas_entered"
    dragLeaveEventName="bananas_left"
    dropEventName="bananas_dropped"
    >
    <img src="bananas.jpg" />
</DragDropContainer>

Target element(s)

And then in the target element's React code, get the DOM element and then add listeners to it. For example, lets assume the target has ref="monkey"...

  componentDidMount() {
    var elem = this.refs.monkey;
    elem.addEventListener('bananas_entered', this.highlight, false);
    elem.addEventListener('bananas_left', this.unhighlight, false);
    elem.addEventListener('bananas_dropped', (ev) => {this.dropOn(ev)}, false);
  }

The dragData is in the detail.data property of the event, so you might handle the drop event like this:

 dropOn(ev) {
   var newBananas = ev.detail.data.bananaCount;
   this.setState({numBananas: this.state.numBananas + newBananas});
 }

Also, the dragged element itself is referenced in the detail.dragElement property of the event. So for example if you wanted the bananas to disappear when they're dropped on the monkey, your dropOn method might look like this:

 dropOn(ev) {
   ev.detail.dragElement.style.display = 'none'
   alert('Thanks for the bananas. They were delicious!')
 }

Options

All passed as properties

dragData (required)

Data about the dragged item that you want to pass to the target. This gets inserted as event.detail.data for the enter, leave, and drop events.

dragEnterEventName, dragLeaveEventName, dropEventName

Custom names for the three events.

They default to "dragEnter", "dragLeave", and "dropOn", respectively

dragGhost

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

Example:

var ghost = <div class="drag_elem">Drag Me</div>;

<DragDropContainer dragGhost={ghost}>

returnToBase

Defaults to true. If false, then dragged item stays where you put it when you drop.

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.