Why I choose Muuri over all other React packages for implementing Drag and Drop…
Hello Guys hope everything is going fine and awesome , on one of my previous blog I have discussed about how to implement Drag and Drop functionality using React DND and Material Ui . In this blog I will discuss how to implement drag and drop functionality using Muuri . Truly speaking I have worked with React DND, React Grid Layout but when I worked with Muuri , I get fully impressed with the functionality it provides ,it has it’s own sorting,filtering and searching functionality ,own onDrag ,onDragStart, onSort event functionalities etc.You can go through the Muuri documentation It’s really nice and self explainable one. So I prepared a simple implementation of drag and drop functionality along with sorting functionality using Muuri. We will analyse our code line by line so that we can understand the concept better,so let’s start..
Before jumping off to the code I want to say what we are actually building we are building some card have title alphabets from A- H, we can drag and drop them with each other and also can sort them according to their alphabetic order by clicking on two buttons ascending and descending.
There are some basic concepts we should know before starting with Muuri:
There is a basic Dom structure we should follow before applying Muuri on it which is like this:
<!-- enter your custom markup -->
This can be anything.
<!-- your custom markup ends here-->
<!-- enter your custom markup -->
<!-- your custom markup ends-->
- Every grid must have a container element.
- Grid items must always consist of at least two elements. The outer element is used for positioning the item and the inner element (first direct child) is used for animating the item’s visibility (show/hide methods). You can insert any markup you wish inside the inner item element.
There are restriction on styles which we are going to apply on the Dom structure.
- The container element must be “positioned” meaning that it’s CSS position property must be set to relative, absolute or fixed. Also note that Muuri automatically resizes the container element’s width/height depending on the area the items cover and the layout algorithm configuration.
- The item elements must have their CSS position set to absolute and their display property set to block. Muuri actually enforces the
display:block;rule and adds it as an inline style to all item elements, just in case.
- The item elements must not have any CSS transitions or animations applied to them, because they might conflict with Muuri’s internal animation engine. However, the container element can have transitions applied to it if you want it to animate when it’s size changes after the layout operation.
- We can control the gaps between the items by giving some margin to the item elements.
- One last thing: never ever set
overflow: scroll;to the container element. Muuri's calculation logic does not account for that and you will see some item jumps when dragging starts.
you may feel little confused by seeing so much restriction ,but don’t worry as we will start coding every thing will be understood . So let’s start
First we will see the folder structure it’s the simple structure that gets created by simple create-react-app <project name> we have added a folder component inside src having a file dragDrop.js it is the main component that is actually rendering in App.js our root component:
dragDrop.js is the file that is having all the cards which are draggable and sorting.and it’s finally render inside our root component which is App.js. Before start coding we have to install 2 npm packages which are muuri and web-animation-js . We can install those packages by running this command on terminal of our VsCode:
npm i muuri web-animation-js
Muuri uses web-animation-js internally to add drag drop animation and styling.So as we have install all the required package now we can move to our App.js. let’s see our App.js:
App.js is self explainable we are importing our component from dragDrop.js and rendering it inside App.js .Now we will see our main component dragDrop.js:
In dragDrop.js we have import React, useState and useEffect from react,Muuri from muuri . Now we have created a functional component called Example. We have defined a state named grid using useState means setGrid is the function which can change the value of the state grid. So we create our grid in which actually Muuri is applied,So how to apply Muuri on grid, on line number 31 , the div having className= “grid” is the wrapper div in which we want Muuri to be applied .Our state grid will change whenever any change like sorting or drag drop event happens inside it. For this we have used useEffect and called setGrid function which will change the value of grid. To apply Muuri on div having className “grid” we have to write it like this:
/* there are some default properties applied by Muuri these are the properties which actually determines how drag and drop should happen we can change those default properties here by overwriting it with the value we provide here.*/
This are the styling which are mentioned on the documentation of Muuri ,this are self explainable we can change the styling but we should follow the style restriction that we have discussed earlier to make sure and everything is working smooth with proper animation and style,it’s really important.So Hurry! our application is ready .Let’s see the output:
So our application is up and running ,You can find the whole code in my GitHub repo
It's a small implementation of Drag and Drop using Muuri GitHub is home to over 50 million developers working together…
So there are many cool stuffs you can do using these awesome libraries, till then don’t stop exploring new things because exploration makes a person better in all aspects of life.