react-dragula

The react-dragula API is identical to the original dragula API, with minor adjustments to ensure compatibility with React. To use it, you pass an array of DOM elements (containers) to the dragula function. These containers define the areas where items can be dragged and dropped.

var React = require('react');
var dragula = require('react-dragula');
var App = React.createClass({
  render: function () {
    return <div className='container'>
      <div>Item 1</div>
      <div>Item 2</div>
    </div>;
  },
  componentDidMount: function () {
    var container = React.findDOMNode(this);
    dragula([container]);
  }
});

You can install react-dragula using npm or bower to add drag-and-drop functionality to your React application.

npm install react-dragula --save

bower install react-dragula --save

For modern React applications, you can use the ref callback attribute to initialize Dragula. This allows you to capture the underlying DOM element (the componentBackingInstance) and pass it to the Dragula function along with an options object.

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>Item 1</div>
      <div>Item 2</div>
    </div>;
  },
  dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };
}

ReactDOM.render(<App />, document.getElementById('examples'));

The reactDragula function acts as a wrapper for the dragula library. It initializes a dragula instance while automatically cleaning up React-specific metadata from cloned elements. This prevents React's internal data-reactid attributes from interfering with the drag-and-drop behavior when elements are cloned during a drag operation.

To use it, call reactDragula() with the same arguments you would pass to the standard dragula() function.

var reactDragula = require('react-dragula');

// Initialize dragula using the wrapper
var drake = reactDragula(container1, container2, options);