More

    React Drag and Drop: Everything You Need to Know

    Introduction about React Drag and Drop: 

    React Drag and Drop (dnd) UI has become one of the most important parts of modern day to day applications. It facilitates richness in UI without consisting of the UX. There are so many instances where we can use drag and drop features in our UI. Some of the popular ones are listed below:

     

    • Using the drag and drop option in the web browser to upload files: All the popular websites like gmail, google forms, WordPress etc. use this feature to allow the users to upload by simply drag and dropping in the required location.
    • For Moving items between multiple lists: Sites like Trello, Asana and many other products of productivity have these feature
    • To rearrange the images and other assets: Many video editors use this feature to re position the assets of their assets between different sections.

    React’s drag and drop library is unlike other drag and drop utilities present out there. It can be intimidating to those who have never used it before. If you get a hold on heart of its concepts of it’s designs then it somehow starts to make sense. React dnd uses Redux internally so you find resemblance to some of its concepts to that of Redux and Flux. 

     

    Popular React Packages for Drag and Drop:

    React has three different packages that are heavily used for creating drag and drop feature:

    • react-beautiful-dnd
    • react-dnd
    • react-grid-layout

     

    All the above listed React packages are equally important and popular amongst the react developers and have got active contributors. However each of them has their pros and cons which we’re going to list below:

     

     React beautiful drag and drop:

     

    • Pros:
    • It is perfect if you have to work with a one dimensional layout. Like that of lists or if the drop requires either vertical or horizontal movements like that of theTrello website, the layout and the to-do-list will work extraordinarily with React DND.
    • The API is super easy to figure out. Any developer would have a wonderful and enjoyable experience while working with a complex codebase.

     

    • Cons:
    • This package does not work with grids as it facilitates only one dimensional layouts like that of the grids.. So it cannot move in more than one direction. I.e it won’t be able to calculate the position of x and y-axis simultaneously. Due to this, your content will be displaced in a random order until you drop the element.

    React grid layout:

     

    • Pros: 
    • This package works for grids and grids include everything so basically it works for one-dimensional movement as well
    • It works quite well for layouts that have complex grids, like that of dashboards which facilitates complete customization and resizing (for eg.: the lookers, products for data visualization, etc.)
    • The complexity for large scale application needs works quite well for this.

     

    • Cons:
    • It is however not a appealing API as lots of calculations we have to do on our own making it very ugly.
    • It becomes very complex to develop dynamic elements on the fly. All the layout structure has to be defined in the UI through their component API,

    React DnD:

    • Pros:
    • This package works with almost all cases i.e. one dimensional layouts or grids, etc. 
    • The API that it works with is very powerful so that any customization in drag and drop might be done.

     

    • Cons:
    • The API is easy only when you have to work with small examples. It gets very tricky and complicated  when we have to achieve things when your application requires something customizable. The learning curve is steeper than that of and more complex than that of react-beautiful-dnd. 
    • In order to support web and touch devices we need to learn and implement a lot of hacks.

     

    React DnD is not like the common drag and drop libraries that exist out there. It can be really intimidating if someone has never used it before. However, once one gets the taste or hang of various concepts that is at the heart of the design of React Drag and Drop. After that it will start to make sense. Some of the concepts of React Drag and drop closely resemble the Flux and Redux architectures. This is no surprise because React Drag and drop actually uses Redux internally.

    Backend: 

    The React Drag and Drop is built on top of the API of HTML5 drag and drop. It is very reasonable as it takes screenshots of the dragged DOM node and then uses that as a preview for the drag out of the box. It is also quite necessary that you don’t have to do anything with drawing as there is cursor movement. The HTML5 drag and drop API is currently the only way to manage the file drop events. But the HTML5’s drag and drop API has some apparent downsides. One of that being it is not supported on tough screens and it has limited customisation availability on Internet Explorer than any other browser.

    To overcome this drawback, HTML5 drag and drop is being implemented in a puggable kind of way in the react Drag and drop. That means you don’t necessarily have to use it and can write different implementations depending on the tough events or mouse events.

    You can also code for something else entirely. Pluggable implementations such as these are called backends the React Drag and Drop. Currently, only HTML5 comes with this library but others may be added in the future. The backend is helpful in abstraction of browser differences and processing of the native events of DOM. The backend might perform a similar role like that of react’s synthetic event system but it does not have any dependency on react or its synthetic event system. 

    Items and Types: 

    Just like Redux or Flux, the React Drag and Drop uses the data instead of the views as the source where it gets truth. When something is being dragged across the screen, it is not said that a component or a DOM is getting dragged. But it is said that an item of a certain type is being dragged. So you might be wondering what an item is? Well, we can say that an item is a plain javaScript object that describes what is being dragged. This approach of describing the dragged data as a plain object helps us in keeping the components always decoupled and unaware of each other’s existence. 

    The next is type. Type is a kind of string or a symbol that uniquely identifies a whole class of items in our application. Types are very useful as our app grows, we might want to make the things more draggable but we won’t want all of the drop targets that already exist to suddenly start reacting to new items. There is probably going to be a enumeration of the type constants in our application which is very similar to how we may have enumeration of the action types of redux. 

    Monitors:

    A monitor is very essential because it lets us update the props of our component in response to the drag and drop state changes. For each component that needs tracking of the drag and drop state, we can define a collecting functiontheat retrieves the relevant bit of it from all the monitos. React Drag and Drop takes care in timely calling the collecting function and merging its return value into our component’s props. 

    Connectors: 

    The backend handles the DOM events but React is used by the components to describe DOM. The question arises how the backend knows which DOM node it has to listen to. This is answered by connectors. Connectors let us assign one of the predefined roles which includes a drag source, a drop target or a drag preview, to the DOM nodes in our render function. 

    Drag Sources and Drop Target: 

    So far, what we have talked about is backends that work with the dOM, the data that have been represented by the items and types and the collecting function including monitors and connectors that lets us decide what props the React Drag and Drop should inject to our components. Whenever we want to make a component or some part of it draggable, we need to wrap that component in a drag source declaration. The drop targets are in a way very similar to the drag sources with the only apparent difference being that a single drop target may register for various item types at once and in place of producing an item, it can handle the hover and drop of the item. 

    Conclusion: 

    We just saw how and what React is capable of when we talk about drag and drop functionality.  However, we can always build very exhaustive exhaustive features using the React drag and drop package. We also discussed some of the popularly used React dnd libraries in the industry and also how to implement it. Drag and drop feature is absolutely one of the most important features any website could have making our task easier and user friendly. 

     

    Recent Articles

    React Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox