Drag and drop – DnD for short – was a prominent feature in the Web 2.0 era. It enabled web app users to rearrange list items, drag files from desktops onto pages, and move elements around on a page. But it was all made possible with specialized JavaScript libraries hacked out to use really low-level mouse pointer events.
When browser-native support for DnD was added to the HTML5 spec, I was excited. The higher-level APIs provided an abstraction over the low-level stuff and were supposed to be cross-platform and easy to use. Unfortunately, it didn’t turn out to be that easy to use.
So, naturally, developers started making wrappers on top of the standard APIs to make things easier for other developers. Until now, I never really stopped and thought about the intricacies even that entailed. So when the creator of two popular drag-and-drop libraries appeared on the Synatax podcast episode The King of Drag and Drop: Alex Reardon and talked about the complexities involved in creating and maintaining such a library, I was amazed.
Concerns like using platform APIs vs. low-level events, web accessibility, performance, and cross-browser support are far from trivial and take months to perfect. I highly recommend listening to the podcast for an interesting conversation.
Bonus: Check this smallish JS tutorial to implement your own custom DnD functionality using just the pointer events and learn how such algorithms work!