Trying out the react-beautiful-dnd to create dragabble items but can't find why it is so "jumpy". The dragged item and other items are moving and scaling after moving item and releasing it (see image gif included). Only when dragging an item/card to the end of the list it is settling without any animation and that would be the way I want to have them.

Using material-UI styles and flex in the javascript based css to center the container with the items.

Tried also skipping the drop animation as suggested with no success: .md

Trying out the react-beautiful-dnd to create dragabble items but can't find why it is so "jumpy". The dragged item and other items are moving and scaling after moving item and releasing it (see image gif included). Only when dragging an item/card to the end of the list it is settling without any animation and that would be the way I want to have them.

Using material-UI styles and flex in the javascript based css to center the container with the items.

Tried also skipping the drop animation as suggested with no success: https://github./atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md

• javascript
• css
• drag-and-drop
• react-beautiful-dnd

• for me i have a draggable list, just following the above mentioned github link solved my problem – Grijan Commented Apr 11, 2023 at 7:29

2 Answers 2

Ok found it in the documents where it says for draggable items: "It is also remended that you do not apply your own transition property to the dragging element."

Removed this css, the smoothener of the shadow:

transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',

Possible Solution

If someone still is having trouble with it: I was passing this array to SortableContext.(My main data was an array of Objects)

["df2Dfs21", "14gJfs11"]

I have seen it multiple times advised to use an array of string as item. I did it because I saw it on a tutorial and it solved my another issue with dnd-kit. But then items began jumping like that.

Then I passed the whole Array of Object as items to SortableContext, then it was resolved.

[{slug: "df2Dfs21", text: "test 1"}, {slug: "14gJfs11", text: "test 2"}]

Note:

You will need to update the handleDragEnd() after doing this.

The package versions I used:

"dependencies": {
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
}