Create Drag and Drop in React

React Native, ReactJS

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

Recommendation

Using MongoDB in Node.js

Create Barcode in React

Create QR Code in React

How to validate form in React

Create Tooltips in React

Create Progressbar in React

Using MongoDB with Laravel

Create Popup Component in React

How to create charts in ReactJS

Basic Query In MongoDB

MultiSelect Components in React

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.