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:

<div class="grid">

  <div class="item">
    <div class="item-content">
      <!-- enter your custom markup -->
      This can be anything.
      <!-- your custom markup ends here-->
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <!-- enter your custom markup -->
      <div class="my-custom-content">
        Yippee!
      </div>
      <!-- your custom markup ends-->
    </div>
  </div>

</div>

1. Every grid must have a container element.
2. 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.

1. 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.
2. 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.
3. 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.
4. We can control the gaps between the items by giving some margin to the item elements.
5. One last thing: never ever set overflow: auto; or 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:

Folder Structure of our code base

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

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:

dragDrop.js

dragDrop.js

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:

New Muuri(‘.grid’,{

/* 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.*/

}).

So we have added some properties like dragEnabled :true, layoutDuration: 400 there are a whole list of properties defined in Muuri documentation ,you can check it out.We will return in this discussion again but before that let’s see the Dom structure in which we have applied Muuri functionality. In line number 31 , div having className “grid” is having div “item” and each “item” div is having the “item-content” div which is actually containing the cards.So our code maintains the Dom which should be followed for applying Muuri on it. So now we will see how sorting functionality is achieved on Muuri ,on line number 16 we are a sending a property name sortData this actually determines according to which data the sorting of the cards should happen, so it’s a object having parameter id which is having a function which return the actual sorting value,that function is having two parameter item and element ,item is the muuri properties which are applied on particle “item” div. and element is having the Dom structure of each “item” div . You can check those by console logging them. So if we notice we will see that we have passed an id on the “item-content” div ,this id is the value by which actually sorting is going to happen so the function should return this value, So we are returning element.children[0].id through the function, means id parameter inside sortData is getting the id value of the particular ‘item-content’ div. So we have determined which value Muuri should use to implement sorting on cards through sortData property.Now last thing is how this sorting function should be triggered,on line number 26 , there are two button on clicking it sorting functional gets triggered. so onClick of them we have passed grid.sort(‘id’) this id is the id that we have declared inside sortData property . So for ascending order sorting we call grid.sort(‘id’) and for descending order sorting we call grid.sort(‘id:desc’) means we don’t have to write a single javascript function for implementing sorting, this is just awesome thing about Muuri. So the last thing is the styling because till now we have just used Dom, but we have to applied flex property on it. so let’s see the App.css file:

App.css

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:

Cards in ascending order

Cards in descending order

Card after implementing drag and drop

So our application is up and running ,You can find the whole code in my GitHub repo

CODE:

Yudhajitadhikary/React_Muuri

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.

HAPPY CODING…..:)