This is a simple React component that will enable you to reorder HTML elements. You can drag any component and change their position.
npm install react-drag-reorderThis is a simple React component that will enable you to reorder HTML elements. You can drag any component and change their position.
Installation is done using thenpm install command:
``bash`
$ npm install react-drag-reorder
Import Draggable from react-drag-reorder and wrap it between the components that you would like to drag and reorder.
`js`
// ES6
import { Draggable } from "react-drag-reorder";
You would have to wrap the Draggable component to the components that you would like to reorder.
`js
import React, { Component } from "react";
import { Draggable } from "react-drag-reorder";
class Drag extends Component {
state = {
words: ["Hello", "Hi", "How are you", "Cool"],
};
render() {
return (
export default Drag;
`
| Props | Description | type |
| ----------- | -------------------------- | ------------------------------ |
| onPosChange | subscribe to change events | function (currentPos , newPos) |
`js
import React, { Component } from "react";
import { Draggable } from "react-drag-reorder";
class Drag extends Component {
state = {
words: ["Hello", "Hi", "How are you", "Cool"],
};
getChangedPos = (currentPos, newPos) => {
console.log(currentPos, newPos);
};
render() {
return (
export default Drag;
`
Support added to contain nested draggable components.
> Please make sure to sort the parent components first before reordering the child.
` Words Languages Showsjs``
class Test extends Component {
state = {
words: ["Hello", "Hi", "How are you", "Cool"],
languages: ["C", "C++", "Java", "JS"],
shows: ["GOT", "Friends", "Big Bang"],
};
render() {
return (
{this.state.words.map((word, idx) => {
return (
{word}
);
})}
{this.state.languages.map((lng, idx) => {
return (
{lng}
);
})}
{this.state.shows.map((lng, idx) => {
return (
{lng}
);
})}
);
}
}
Contributors are welcome ! :smiley: