search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.29k stars 2.53k forks source link

When moving a Draggable, big gap appears at the top of a list and moves everything weirdly #2158

Open wiktoriavh opened 3 years ago

wiktoriavh commented 3 years ago

Expected behavior

Like in the example, the tasks don't get moved out of boundary weird

Actual behavior

My tasks are being moved out of boundary weirdly and I don't know how to not make it. I did follow the tutorial and I have the same problem there as well. The red border is the drop zone.

Steps to reproduce

Check the demo below. Dragging from the top to the bottom gives the effect, like shown in the gif above. This also happened when dragging inside a dragging zone.

Suggested solution?

There must be something so that it doesn't appear. After all, it doesn't appear in the examples.

What version of React and react-beautiful-dnd are you using?

    "next": "10.0.9",
    "react": "17.0.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "17.0.1",

What browser are you using?

Gif is from Chrome. But it also appears in Firefox, Edge and Opera. I am on Windows 10.

Demo

https://codesandbox.io/s/dnd-error-liytx?file=/Dropzone.js

benkirbycodes commented 3 years ago

Having a similar issue. Would love some insight.

wiktoriavh commented 3 years ago

For another page with drag and drop I have the same issue again: https://codesandbox.io/s/dnd-error-forked-8t4i0?file=/index.js

When dragging you can see that a big gap is being created, so it doesn't look smooth at all. This is frustrating, and I don't know how to get it fixed.

rickdunkin commented 3 years ago

I've recently tried to implement horizontal drag and drop via this library, and ran into the same issue with extra space appearing upon drag. It looks like every element is getting a translate applied where the x value equals the dragged elements width. I found if I apply translate(0, 0) to every draggable element that is not being dragged, the offset issue is resolved, but I lose the animation when items are swapped which is incredibly unfortunate.

I noticed that changing the version of react-beautiful-dnd to v10.0.4 in the codesandbox supplied in the OP actually fixes this issue, which seems to point to a change in v10.1.0 that may have caused this issue.