react-data-dnd
Simple way to use drag and drop with react
Last updated a year ago by nosyara .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-data-dnd 
SYNC missed versions from official npm registry.

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>

DND name must be unique and contain only lower case characters

Current Tags

  • 1.0.10                                ...           latest (a year ago)

11 Versions

  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 11
Last Day 0
Last Week 11
Last Month 0
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |