The tree example is pretty nice, dragging to different levels is always a crapshoot with these libraries.
A feature-rich front-end drag-and-drop component library
11–20 of 80 posts
Re: A feature-rich front-end drag-and-drop component library
#12To 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…
I also found dndkit and built a very complex/robust drag and drop form builder with it. It gave me nice abstractions for custom collision detection without worrying about the browser implementation. Highly recommended.
Re: A feature-rich front-end drag-and-drop component library
#13I 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 ou…
Most of these leverage the native drag and drop primitive APIs, which are going to be slightly slower on any touch device.
There's a series of events that could be fired, depending on what the user is trying to do, and initiating a drag is lower than waiting to see if they are making a gesture or clicking / tapping something.
Re: A feature-rich front-end drag-and-drop component library
#14Drag and drop between tabs/windows is pretty remarkable, though I wonder if users would even try such a thing to justify the increased complexity.
That’s natively supported with the HTML5 drag and drop API using dataTransfer. React-beautiful-dnd didn’t support that because they were basically reimplementing the whole thing from scratch and bypassing the browser’s dnd stuff.
Re: A feature-rich front-end drag-and-drop component library
#15Looks like it's the successor to https://github.com/atlassian/react-beautiful-dnd given https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma...
Yeah, I hope the migration is not going to be too painful because https://github.com/atlassian/react-beautiful-dnd is a key component in one of my important project
Re: A feature-rich front-end drag-and-drop component library
#16[flagged]
[deleted]
Re: A feature-rich front-end drag-and-drop component library
#17To 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…
I also found dndkit and built a very complex/robust drag and drop form builder with it. It gave me nice abstractions for custom collision detection without worrying about the browser implementation. Highly recommended.
Can you link to the form builder? I'm interested to see.
Re: A feature-rich front-end drag-and-drop component library
#18Drag and drop between tabs/windows is pretty remarkable, though I wonder if users would even try such a thing to justify the increased complexity.
That’s natively supported with the HTML5 drag and drop API using dataTransfer. React-beautiful-dnd didn’t support that because they were basically reimplementing the whole thing from scratch and bypassing the browser’s dnd stuff.
The HTML5 DnD is terrible to use, that's why many use cases require reimplementing it. For example, styling the elements is much more finnicky than it needs to be.
Re: A feature-rich front-end drag-and-drop component library
#19Cannot believe they missed the opportunity to call it "Dragmatic".
This is such a cool name that I'd open an issue and suggest the rebranding :)
Re: A feature-rich front-end drag-and-drop component library
#20To 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 th…
>For cases like this, these libraries prove woefully inadequate. I had to hand-write the whole thing
Did you write it in react? This is really one of the use cases where React can become a hindrance.