Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A feature-rich front-end drag-and-drop component library

github.com

Post reply on HN
Print view View original

1–10 of 80 posts

Re: A feature-rich front-end drag-and-drop component library

#3

Post by strongpigeon »

This looks really good. Much better than react-beautiful-dnd which was sheer madness IMO. They were reimplementing most of the stuff browser does for you. Sadly I just built my own stuff on top of native browser drag-and-drop, but might look into changing to using this eventually.

The browsers inconsistencies are pretty annoying. Especially the weird Chrome stuff when you remove the draggable from the DOM during drag. Great to see their lib hiding this.

Re: A feature-rich front-end drag-and-drop component library

#6

Post by cjen »

To provide some context for this, Atlassian originally created a drag and drop library called react-beautiful-dnd. A few years ago they stopped maintaining the library, and some community forks took over (I think @hello-pangea/dnd is the most popular).

In the interim I've found https://dndkit.com a _really_ nice solution, but it's only available in React-land.

Looks like this new library was written at least in part by the same guy who wrote react-beautiful-dnd, so my hopes are high (as long as this one stays maintained...)

Re: A feature-rich front-end drag-and-drop component library

#7

Post by windowshopping »

cjen wrote: post #6

To provide some context for this, Atlassian originally created a drag and drop library called react-beautiful-dnd. A few years ago they stopped maintaining the library, and some community forks took over (I think @hello-pangea/dnd is the most popular). In the interim I've found https://dndkit.com a _really_ nice solution, but it's only available in React-land. Looks like this new library was written at least in part…

Both the dndkit and pragmatic-drag-and-drop are great for simple use cases. If you're building something complex though, neither will cut it, nor will any other dnd library I've seen. I built a card game interface last year that involved 3 forms of droppable:

- a hand, where cards were display in a row and could be reordered

- a pile, where cards stacked and only showed the topmost card, which could be dragged off the pile

- a play area, where cards were freely arranged and overlapped each other based on which was moved most recently (and thus "on top"), and in which groups of cards could be moved as a unit via drag-select

For cases like this, these libraries prove woefully inadequate. I had to hand-write the whole thing and it was by far the most challenging front-end work I've ever done, especially since it's multiplayer.

Re: A feature-rich front-end drag-and-drop component library

#8

Post by xyst »

I tried the examples on mobile device and it takes awhile for component to recognize its “picked up”. Have to wait what seems like half a second. If I move before then, it doesn’t do anything or it highlights content when I try to drag.

I hope that can be tuned with the library but otherwise it looks pretty good.

edit: I really wish there was an ability to move multiple items at once. Or maybe I haven’t figured it out on mobile.

Post reply on HN