Create Drag and Drop in React

Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. We can use this feature in managing our dashboard widgets. Create a draggable menu in react. Ordering the list items in react. Here we will create drag and drop in React using npm react-dragula package. You can read about react-dragula package here.

Installation

npm install react-dragula --save

Create Drag and Drop in React

Now, we can use react-dragula in our components. For example we are using this in App Component as.

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'));