CODEWITHSUNDEEP
javascriptcssdrag-and-dropreact-beautiful-dnd
Patrik Rikama-Hinnenberg
Patrik Rikama-Hinnenberg

Reputation: 1600

Items jumping when dropping on react beautiful dnd

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.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md

gif image of issue

Upvotes: 6

Views: 7308

Answers (2)

Lshiroc
Lshiroc

Reputation: 49

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",
}

Upvotes: 0

Patrik Rikama-Hinnenberg
Patrik Rikama-Hinnenberg

Reputation: 1600

Ok found it in the documents where it says for draggable items: "It is also recommended 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)',

Upvotes: 9

Related Questions