Hacker News Reader

Comment by caradine | Hacker News Reader

It's true that the HTML drag and drop API is pretty limited for more complex interactions. I recently did a lot of searching for a drag and drop library for a board game I'm working on and almost went with DFlex. I decided to go with DnD Kit because of its powerful React API. However, I'm very glad there's a vanilla JS solution as well with DFlex.

View on HN

Thanks for the feedback. DnD kit is amazing and the initial library also is so powerful [1]. But we still need a comprehensive solution. Committing changes to DOM with each interaction and shadow caching is not a sustainable solution for building interactive apps. React or any other framework is not designed for interactivity. So even if you are using React you are not actually getting the benefit of React to reconcile because you still committing changes directly to DOM. That's why I built DFlex which has its own reconciler and transformation mechanism.

[1]: https://shopify.github.io/draggable/

> React or any other framework is not designed for interactivity.

I thought that was the whole point. Are we using different definitions of interactivity?

In the drag-and-drop context, an interactive element is an element that can traverse the DOM tree and change its position without causing a layout shift and with a proper reconciler and transformation mechanism.

HTML drag and drop does have a few powerful features that cannot be done otherwise. You can move an item outside your app into, for example, a native photo library app. Or even on iPhone, drag/drop an item to iMessage and send it to someone as an image or piece of text. Something that also doesn't work in DFlex is scrolling through a page while holding an item, something that also "just works" with native HTML drag and drop.

Sorry for not updating the demo included on the site. But scrolling is working in the newer version. Also, DFlex is not meant for uploading assets to the browser otherwise, it's the future of interactive apps when elements can be transformed and positioned smoothly. This is what I am trying to achieve with DFlex that's why I spent so much time figuring out the optimal solution for reconciling a transformed element instead of adding a layer to html5 and call it a day.

Reply on news.ycombinator.com