ThomasChan / react-drag-and-drop

Basic drag and drop for React

React Drag and Drop

This library contains some very basic draggable and droppable components.

You probably want to use something more stable and feature rich like react-dnd.

Install

npm install react-drag-and-drop

Use

import { Draggable, Droppable } from 'react-drag-and-drop'

class App extends React.Component {
    render() {
        <div>
            <ul>
                <Draggable type="fruit" data="banana"><li>Banana</li></Draggable>
                <Draggable type="fruit" data="apple"><li>Apple</li></Draggable>
                <Draggable type="metal" data="silver"><li>Silver</li></Draggable>
            </ul>
            <Droppable
                types={['fruit']} // <= allowed drop types
                onDrop={this.onDrop.bind(this)}>
                <ul className="Smoothie"></ul>
            </Droppable>
        </div>
    }
    onDrop(data) {
        console.log(data)
        // => banana 
    }
}

So the idea is that you wrap your components in Draggable and Droppable containers (instead of using mixins), define types and data to carry. You can also hook into the different drag events to create more funk. The best way (for now) to figure out how is to peak inside the src directory. The implementation is quite minimal.

Changelog

2.4.0

• Support for wrapperComponent prop where one can pass a component to be used instead of the standard components for Draggable and Droppable 🎉 Thanks to @aaa707 for this one 🚀

2.3.0

• Support for enabled prop for Droppable component

2.2.0

• Droppable now accepts className as prop - thanks @abdennour 🎉

2.1.0

• Support for React 15

2.0.2

• Support for enable prop in Draggable component

2.0.1

• Did a build (forgot for 2.0.0 release) 🤦

2.0.0

• Updated to remove warning for React v0.14

1.1.0

• Spreading this.props on both Draggable and Droppable

1.0.1

• Added FireFox support (DOMStringList -> Array)

1.0.0

• Initial release 🎉

enjoy