search

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
7.45k stars 133 forks source link

CSS transforms animations similar to react-beautiful-dnd #3

Closed bricejar closed 1 month ago

bricejar commented 2 months ago

Hi,

Will it be possible to make animations for drag and drop within simple lists similar to react-beautiful-dnd, when dragging an item moves the other items around using css transforms ?

I acknowledge that this might not be the recommended approach due to potential user experience and performance concerns. Nonetheless, I'd like to know if there are any inherent limitations that might hinder someone from replicating an experience similar to what was offered by react-beautiful-dnd.

alexreardon commented 1 month ago

Short answer: You could make something similar, but likely not exactly the same as react-beautiful-dnd, unless you are willing to write a lot of code

Longer answer:

The web platform drag and drop functionality doesn't work too well with things shifting around: when you shift things around, you also shift their hitboxes. That said, you can get pretty far with not too much trouble. See the trello part of this video:

Show case of some examples

masudhossain commented 1 month ago

Short answer: You could make something similar, but likely not exactly the same as react-beautiful-dnd, unless you are willing to write a lot of code

Longer answer:

The web platform drag and drop functionality doesn't work too well with things shifting around: when you shift things around, you also shift their hitboxes. That said, you can get pretty far with not too much trouble. See the trello part of this video:

Show case of some examples Show case of some examples

But how do we add add the styling to animate the cards when moving it around if we use the @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration?