Drag and drop so simple it hurts
Official React wrapper for dragula.
Demo
Try out the demo!
Install
You can get it on npm.
npm install react-dragula --saveOr bower, too.
bower install react-dragula --saveUsage
Refer to the documentation for dragula. The API for react-dragula is identical, but a few tiny tweaks were made around it so that it works out the box with React.
Example
Here's an example application using react and react-dragula.
var React = require('react');
var dragula = require('react-dragula');
var App = React.createClass({
render: function () {
return <div className='container'>
<div>Swap me around</div>
<div>Swap her around</div>
<div>Swap him around</div>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>;
},
componentDidMount: function () {
var container = React.findDOMNode(this);
dragula([container]);
}
});
React.render(<App />, document.getElementById('examples'));Example using refs (ES2015 syntax)
Here's an example using refs (ES2015 syntax): React: The ref Callback Attribute
import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';
export class App extends React.Component {
render () {
return <div className='container' ref={this.dragulaDecorator}>
<div>Swap me around</div>
<div>Swap her around</div>
<div>Swap him around</div>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>;
},
dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = { };
Dragula([componentBackingInstance], options);
}
};
});
ReactDOM.render(<App />, document.getElementById('examples'));License
MIT