Implementation of Drag & Drop using React Grid Layout….

Hi Guys , In my previous articles I have discussed how to implement Drag and Drop in react using React Beautiful DND and Muuri .In this article I will explain another way of implementing it using React Grid Layout. React-Grid-Layout is a grid layout system only for React.It is responsive and supports breakpoints. Breakpoints layouts can be provided by the user or auto generated. React Grid Layout is React-only and does not require JQuery.

We can refer the github link as the reference to get a brief idea on React Grid Layout: https://strml.github.io/react-grid-layout, it contains example of several implementations of Drag and Drop using React-grid-layout with the source code.

Now we are going to build a small application where there will be 6 cards which are draggable and droppable , and there will be a button on clicking on it , all the cards will increase by two columns and vice versa.Our screen is actually divided into 12 column horizontally .By React Grid Layout we can actually define the breakpoints and layout structure of our React component. This thing will be more clear when we will start implementing those thing in our code.So let’s start coding ,we will first see the folder structure of our codebase :

Folder Structure

So the basic folder structure is the structure we get actually when we run basic npx create-react-app <Project name> command in our Vs-code Terminal.We have just modified the App.js folder and added a folder in src called components which contains our 6 cards which are going to render in our application.Before start coding we will install our npm package by running command npm i react-grid-layout .So let’s see the App.js file:

App.js

App.js

App.js

In App.js ,we imported Responsive and WidthProvider from react-grid-layout.We have imported our card component DemoComponent.

const ResponsiveGridLayout = WidthProvider(Responsive);

This actually means ResponsiveGridLayout is our react grid layout which is responsive automatically, We will be inserting all our 6 cards inside this ResponsiveGridLayout to make them responsive and all also to make them draggable and droppable. Now inside our App component , we are creating a state called value and setting it to true, this acts as the variable which will change on clicking of the Button , to toggle text inside the button and is responsible for the changing of the react grid layout structure. onHandle() is the function which will trigger on the click of the button , onHandle() is actually toggling the value of state value.Now comes the render part , inside render we are predefining our layout , so how we define our layout ? Layout will be array which contain the object which will determine the initial position ,height & width of the particular card which will be inside our ResponsiveGridLayout component . There are several parameter we have to define for each object to define the position of that particular component or card in our case.Those are i: i acts as the id of particular component ,it determines in which component the particular layout position will apply, x: x actually determines the position of component according to x axis , similarly y: y determines the position of component according to y axis.w : w determines the width of the component it is measured in col and h: h determines the height of the component , it’s measured in row. So lets define our layout grid positions of six cards.

var layout = [

{ i: “a”, x: 0, y: 0, w: 4, h: 1 },

{ i: “b”, x: 4, y: 0, w: 4, h: 1 },

{ i: “c”, x: 8, y: 0, w: 4, h: 1 },

{ i: “d”, x: 0, y: 1, w: 4, h: 1 },

{ i: “e”, x: 4, y: 1, w: 4, h: 1 },

{ i: “f”, x: 8, y: 1, w: 4, h: 1 },

];

So a is the id of the 1st Card , as it will be the first card the x position will be 0 , and y position will also be 0,width is 4 cols and height is 1 row, so there are 12 cols in a row means we can put 3 cards in one row, therefore the x position of 2nd card is 4 and y position of 2nd card is 0 as it will be in 1 row itself , similarly the 3rd card will have 8 x position and 0 y position , and this continues for other card also .So onclick of the button we want to change the layout structure of the cards ,As I mentioned earlier we want to increase the width of the cards by 2 cols for that reason we defined another grid layout :

var layout1 = [

{ i: “a”, x: 0, y: 0, w: 6, h: 1 },

{ i: “b”, x: 6, y: 0, w: 6, h: 1 },

{ i: “c”, x: 0, y: 1, w: 6, h: 1 },

{ i: “d”, x: 6, y: 1, w: 6, h: 1 },

{ i: “e”, x: 0, y: 2, w: 6, h: 1 },

{ i: “f”, x: 6, y: 2, w: 6, h: 1 },

];

So here we are increasing the width of the cards by 2 columns,so we can now put 2 cards in one row. So the 1st card is having x position 0, y position 0,2nd card is having x position 6,y position 0 , and this continue for other card also.

var layout = { lg: this.state.value === true ? layout : layout1 };

The layout will change according to the Button Click .Now there is a Button on click of which we are toggling the value .After that we are placing our react grid layout.

<ResponsiveGridLayout

className=”layout”

layouts={layout}

breakpoints={{ lg: 1200 }}

cols={{ lg: 12 }}

rowHeight={281}

width={1200}

>

In ResponsiveGridLayout we are setting a classname , we are passing layout as the layouts of our grid system. Layout will change according the button click, we also set the breakpoints 1200px will be considered as large (lg). We are also setting the cols ={{lg:12}} means there will be 12 cols in large screen ,We are also determining the rowHeight , means 281px(281 X 1=281) will be the height of each card.and width of the react grid layout is 1200px. After that we are placing 6 cards inside this react grid layout.One thing we should notice that the key which we are passing in the div must match with the ids(i) passed into the objects inside layout, the positioning of the cards will be determined by this ids .Now let’s see the Card component it’s simple and self explanatory:

DemoComponent.js

So Now our application is up and running so let’s see:

Initial Our Application will look like this

These cards are all draggable and droppable

As we click on button all the cards will increase by 2 cols

I am sharing my github link as the reference of this article :

Yudhajitadhikary/React-Grid-Layout_Blog

So there are many cool stuffs you can do using these awesome libraries, till then don’t stop exploring new things because exploration many a person better in all aspects of life.

HAPPY CODING…..:)