Ever since I started using React I have used react-dnd for any drag and drop interactions. It is super flexible and allows for handling files and drag across windows since it used the browser’s drag and drop API. For some reason, I never really clicked with the API and for me it never felt easy to work with. But it worked really well when I eventually got things working. It did have it’s own issues though due to the bugginess of the native drag and drop API, which later libraries tried to solve by bypassing the native API altogether. I also always had issues and glitchiness I could never solve after migrating from the old API to the hooks API.
Unless I’m missing something, every well known drag and drop library for React has used various DOM manipulation techniques instead of the native drag and drop API, so there was always limitations and cases where they didn’t work well – like only working for veritcal lists for example. I never found them flexible enough.
Recently Atlassian open-sourced their new drag and drop framework called Pragmatic Drag and Drop. A successor of sorts to React Beautiful DND. Pragmatic DnD is the first library I’ve seen since React DnD that uses the native API, and it does a really good job of smoothing over issues with the native API.
I have found the API really nice to work with and it has clicked in my mind. I find it quite easy to work with. Here is an introduction to the library:
Unfortunately the documentation isn’t great, and the examples are very complicated to figure out if you don’t know the APIs yet. They are also very tied to Atlaskit, Atlassian’s component library. So if you can figure out the examples, there is a bit of work untangling the code from Atlaskit. I did find the following video that really broke down the APIs and presented the library in a simple manner. This helped me a lot with being able to read the examples, so I hightly recommend if you want to learn Pragmatic Drag and Drop:
Pragmatic Drag and Drop really opens up a lot of possibilities, and I’ve found that in conjunction with the new CSS ViewTransitions API you can create some really nice UI. But maybe that’s for a future post!