Drag and Drop in the (p)react ecosystem

The Baby Bliss Bot project decided to adopt preact as a lightweight proxy for react development, allowing access to a more readable, compact codebase with some rendering efficiency improvements.

However, Cindy’s investigations show that the major DnD library in this space is React DnD which apparently has significant compatibility issues with preact (even via preact/compat) due to odd timining issues wrt construction of Elements and references to them. This led to a fork preact-dnd which unfortunately is drifting without updates for 7 years.

Awkardly, many of the samples for React, e.g. https://react-dnd.github.io/react-dnd/examples/customize/handles-and-previews appear to be broken and the whole library appears to have usability issues. This is somewhat aggravating since we solved these issues, and in an accessible way, over 15 years ago, in the context of the old jQuery ecosystem via the Reorderer.

We may be better off with a plain HTML + (p)react implementation as in this example, which as least we know won't result in portability issues: https://medium.com/nerd-for-tech/simple-drag-and-drop-in-react-without-an-external-library-ebf1c1b809e

Joseph collected a few resources on comparisons between Preact and React.

Â