Not enough examples

[bernaferrari]

React-beautiful-dnd has many examples. Animated, input on/off, onBeforeCapture. So many things. I don't like pragmatic drag and drop because it has like 2-3 examples, they all use emotion and other things I don't use, so they are super complex, and they lack animation. So it feels a regression. From 10 LOC to 100 LOC, no animation, and harder to read code. Maybe I'm missing something, but I guess if you just had more examples, life would be easier. Or maybe you don't have examples because pragmatic is too low level and that would make making examples harder?

All I wanted is something like this:
https://react-beautiful-dnd.netlify.app/?path=/story/nested-interative-elements--stress-test

Screen.Recording.2024-06-17.at.19.41.49.mov

[benjosua]

I agree, getting started with this library is incredibly difficult. I've already spent about 5 hours debugging just the examples. I hope Atlassian invests some time in improving the documentation so this library receives the recognition it deserves and doesn't end up underutilized.

[bernaferrari]

For now I'm using hello-pangea/dnd, it is not perfect, but does the job mostly well. @dnd-kit is in second place, but documentation is worse and also has bugs. I haven't found a drag and drop library that can make reorder and drop without any issues, unfortunately.

[benjosua]

After a few days of effort, I successfully implemented pdnd, and it's now running smoothly. I believe they've also expanded the documentation. Don't give up; you'll likely experience a moment of clarity as you work through it. And I tried dnd-kit before, but pdnd is just much smoother and way more performant.

[benjosua]

@bernaferrari If you need help creating the move around animations, I implemented them using framer/motion and could provide an example if you are interested.

[bernaferrari]

I still think the api is necessarily complex compared to beautiful dnd or dnd kit, but I would love this example.

[alexreardon]

Here are some simpler examples that might help you get started: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#simple-list-on-other-stacks

A challenge with creating "simple" examples is that pdnd is a low level library, and it gives users a lot of control on what they want to do. It's operating at a similar abstraction level as jQuery (low level, smooths over browser roughness, not opinionated about what you want to do with it)

[bernaferrari]

pdnd shouldn't replace beautiful dnd if it is extremely low level, hard to use and severely limited. They should at least have maintained or reimplemented it using pdnd.

[SimonFrank14]

@bernaferrari If you need help creating the move around animations, I implemented them using framer/motion and could provide an example if you are interested.

Hey,
Do you mind sharing an example for this? I'm currently working with DnDkit but I am experiencing a lot of issues because my setup is a little bit complex and not so straightforward with DnDkit anymore.

This results in a lot of renders and I thought of using pDnD but the animations are a must have feature for me.

Thank you.

[bernaferrari]

https://codesandbox.io/s/framer-motion-drag-and-drop-d7en2

But chatgpt/Claude can do for you pretty quickly and easily. It is basically Reorder.Group and Reorder.Item.

Framer Motion is absolutely great, zero bugs or issues. I'm not using this lib anymore.

[kvanapamala]

If anyone looking to use lists drag and drop, there is very good example laid out by Rishi Purwar. Please find
example : https://blog.logrocket.com/implement-pragmatic-drag-drop-library-guide/
started code is in GIT: https://github.com/rishipurwar1/pragmatic-drag-and-drop-demo

[chihiroxxc]

Hi @benjosua , I would appreciate if you can share your demo with moving animation, I didn't find any example of pragmatic-drag-and-drop with moving animation.

Thanks!

[bernaferrari]

@chihiroxxc go with Framer Motion. Pragmatic was born dead.