React-data-dnd NPM

react-data-dnd

Simple way to use drag and drop with react

Example of usage

Use all defaults

import {Draggable, DropZone} from 'react-data-dnd';

class App extends Component {
  render() {
    return (<div>
         <DropZone>Shopping Cart</DropZone>
         <Dragable>My Product</Dragable>
    </div>)
  }
}

Examples

1. Super Simple

Using all defaults

<DropZone>Drop here</DropZone>
<Draggable>Drag me</Draggable>

2. Using data

data property of draggable passed as parameter to dropZone.onDrop and dropZone.canDrop functions.

    <DropZone 
       onDrop={(data) => { ... }} 
       canDrop={(data)=>{ ... }}>Drop here</DropZone>

    <Draggable data={{type:'B',value:200}}>Drag me</Draggable>

3. `canDrop` function

canDrop function gets data from draggable as parameter and returns true or false according to that data.

    <DropZone canDrop={(data) => { return data.type === 'A' }}>Drop A, but not B.</DropZone>

    <Draggable data={{type:'A',value:100}}>Drag A</Draggable>
    <Draggable data={{type:'B',value:200}}>Drag B</Draggable>

4. non default DND manager

Untill now we used default instance of DND manager - so any DropZone allowed to deal wtith any Draggable. In some cases we want separate managers for parts of application.

    import { DND, Draggable, DropZone } from 'data-react-dnd'
    ...
    const dnd1 = new DND('my-dnd-1');
    const dnd2 = new DND('my-dnd-2');
    ...
    <DropZone dnd={dnd1}>Drop zone only for A</DropZone>    
    <DropZone dnd={dnd2}>Drop zone for B & C</DropZone>    

    <Draggable dnd={dnd1} data={{type:'A',value:1000}}>Drag A</Draggable>
    <Draggable dnd={dnd2} data={{type:'B',value:1000}}>Drag B</Draggable>
    <Draggable dnd={dnd2} data={{type:'C',value:1000}}>Drag C</Draggable>