Create Drag and Drop in React
Tue Nov 29 2022 23:19:01 GMT+0000 (Coordinated Universal Time)
Saved by
@wjdev
#react.js
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'));
content_copyCOPY
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.
npm install react-dragula --save
https://readymadecode.com/create-drag-and-drop-in-react/
Comments