Drag and drop so simple it hurts
npm install react-dragula[![logo.png][3]][2]
> Drag and drop so simple it hurts
Official React wrapper for [dragula][4].
[![demo.png][1]][2]
Try out the [demo][2]!
You can get it on npm.
``shell`
npm install react-dragula --save
Or bower, too.
`shell`
bower install react-dragula --save
Refer to the documentation for [dragula][4]. 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.
Here's an example application using react and react-dragula.
`jsx`
var React = require('react');
var dragula = require('react-dragula');
var App = React.createClass({
render: function () {
return ;
Swap me around
Swap her around
Swap him around
Swap them around
Swap us around
Swap things around
Swap everything around
},
componentDidMount: function () {
var container = React.findDOMNode(this);
dragula([container]);
}
});
React.render(
Here's an example using refs (ES2015 syntax): React: The ref Callback Attribute
`jsx``
import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';
export class App extends React.Component {
render () {
return ;
Swap me around
Swap her around
Swap him around
Swap them around
Swap us around
Swap things around
Swap everything around
},
dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = { };
Dragula([componentBackingInstance], options);
}
};
});
ReactDOM.render(
MIT
[1]: https://github.com/bevacqua/react-dragula/blob/master/resources/demo.png
[2]: http://bevacqua.github.io/react-dragula/
[3]: https://github.com/bevacqua/react-dragula/blob/master/resources/logo.png
[4]: https://github.com/bevacqua/dragula