Delay in dropping while using React Beautiful DnD

While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position.

You can see the problem in action by following this link: Link to issue

After dropping the item into a list, it readjusts itself to fit within the div.

Below is the code snippet for the item:

        import React, { useState } from "react";
    import styled from "styled-components";
    import { Draggable } from "react-beautiful-dnd";
    
    // Remaining code for the item here

The code for the list is as follows:

import React, { useState } from "react";
import styled from "styled-components";
import Ticket from "./Ticket";
import { Droppable } from "react-beautiful-dnd";

// Remaining code for the list here

I have experimented with flexbox styling and adjusting margin and padding properties. Removing margin and padding seems to eliminate the issue, but all examples in beautiful-dnd showcase spacing between items without any delays. Any suggestions on how to resolve this?

Answer №1

It appears that the placeholder may be missing the 8px bottom margin present on other Draggables.

If you pick up an item from somewhere in the list (without moving its position), you'll notice the list shifts slightly upward immediately. However, if you drop something at the end of the list, this issue does not occur.

The placeholder's margins are determined by the dragged item. You can observe this by examining the inline styles of the placeholder element that appears while dragging it to the droppable area.

To address this issue, consider placing the provided innerRef, draggableProps, and dragHandleProps directly on the Ticket Container instead of a parent div. It is possible that react-beautiful-dnd is not accounting for the margins correctly when they are on a different element.

Answer №2

It is possible that the delay you are experiencing is due to fluctuations in the size of your list while dragging an element, causing the library to recalculate and animate at a slower pace.

To resolve this issue, it is recommended to prevent any changes in size while dragging.

Potential causes of the problem include:

---- Root Cause A ----

When dragging, the {provided.placeholder} auto-inserted into the DOM may not have consistent margins/padding compared to other draggable elements.

Solution

Ensure that the styles which differentiate the elements (margin/padding) are also applied to the element using provided innerRef, draggableProps, and dragHandleProps, allowing the {provided.placeholder} to inherit these styles.

---- Root Cause B ----

You might be utilizing flexbox or css-grid with a gap property to separate elements.

Solution

Avoid using gap and instead add margin to the element with provided innerRef, draggableProps, and dragHandleProps (avoid inline styles and opt for CSS classes).

Extra Tip: Confirming the Size Change Issue

Try dragging elements from different locations in the list and observe how another element may shift slightly. Additionally, dropping an item at the end of the list may not exhibit the same issue.

Answer №3

Dealing with the same issue led me to a solution that involved using inline styling with provided props, as detailed in the documentation.

const DisplayItem = ({ item, index }) => {
  return (
    <Draggable draggableId={item.id} className="draggableItem" index={index}>
      {(provided, snapshot) => {
        return (
          <div
            ref={provided.innerRef}
            snapshot={snapshot}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={{
              userSelect: "none",
              padding: 12,
              margin: "0 0 8px 0",
              minHeight: "50px",
              borderRadius: "4px",
              backgroundColor: snapshot.isDragging
                ? "rgb(247, 247, 247)"
                : "#fff",
              ...provided.draggableProps.style,
            }}
          >
            <div className="cardHeader">Header</div>
            <span>Content</span>
            <div className="cardFooter">
              <span>{item.content}</span>
              <div className="author">
                {item.id}
                <img className="avatar" />
              </div>
            </div>
          </div>
        );
      }}
    </Draggable>
  );
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to invoke a method in Jest Enzyme without using .simulate()?

During my unit testing for a React flight seat selection application using Jest/Enzyme, I encountered a scenario where I need to test a method within my class-based component that runs after a button is clicked. However, the button in question resides deep ...

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Is there a way to convert this hover menu into an onclick menu? <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'><span>Users</span></a> <ul> ...

Testing axios requests using react testing library and jest: A comprehensive guide

Trying to ensure that the onSubmit function is handled correctly after clicking the search button. My approach involves testing the inner workings of the onSubmit function, specifically focusing on the behavior of the axios request. In my test, I mocked ...

A div positioned to the left is placed beneath another div

I am faced with a design challenge involving two divs. The first div is floated left, while the second div is floated right. In order to achieve a responsive layout, I need the first div to go under the second div when the viewport changes. Both divs conta ...

Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...

What is the best way to resolve the CSS border styling issue surrounding the anchor element?

I created a simple sign-up form for my school project where users can choose their roles. I'm facing an issue with the border under the anchor tag and I need help fixing it. How can I ensure that the space at the top is equal to the bottom as well? T ...

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

Creating a personalized state object containing unresolved promises in React Native utilizing axios inside a custom React Hook

I'm currently in the process of creating a custom state within a custom Hook for React Native (non-Expo environment). The state I am working on looks like this: interface ResponseState { api1: { error: boolean; errorMsg?: string; ...

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

What are the various ways to apply unique padding styles to ng-repeat items?

Take a look at this image. I need to position my 6 boxes on the 6 vertical lines above the image. I am struggling with applying different padding styles to my ng-repeat directive. Although I tried using [ng-class], it doesn't seem to work as expected. ...

Tips for clearing express-session during a logout process in a Node.js application

Currently, we utilize express-session to store data in our Node application. For instance, we set user information like this: req.session.userinfo = userObj; Could you advise on the best practice for clearing session information during logout? We apprecia ...

Combining items from the identical array in pairs using distinct identifiers

I have an array containing double values. const data = [ -0.003,-8.178509172818559E-16, 0.002,-1.3576469946421737E-15, 0.007,-1.2329107629591376E-1] I am looking to utilize these values in react-vis. The necessary syntax for data insertion in react-vis ...

Are there any reliable sources for a complete list of browser CSS properties?

Is there a way to easily access a comprehensive list of CSS properties supported by specific browsers, particularly IE8? Any suggestions on where I can find this information? ...

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen. /**{ margin: 0; padding: 0; box-sizing: ...

Can someone explain why the color of a <select> element in Chrome is being influenced by the CSS property "font-family: inherit"? Here is an example

I've always been curious as to why the <select> element appears in different colors on various web pages. I've noticed that when the font-family:inherit css property affects the select element, it ends up looking blue! <!-- BLACK --> ...

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

Enhancing my code by implementing various conditions in React

Looking for ways to enhance my code quality (Very Important, Important, Medium, Low, Good, Excellent,...) : { Header: "Opinion", accessor: (row) => row.opinion, Cell: props => <span> {props.value == ...

The feature of History.push encounters issues when used within a nested child navbar component

I have a unique app structured as follows: <Provider store={store}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider> Within the App component, I've set up the following routes ...

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...