[HN Gopher] A feature-rich front-end drag-and-drop component lib...
___________________________________________________________________
A feature-rich front-end drag-and-drop component library
Author : NeilSmith2048
Score : 121 points
Date : 2024-04-24 18:25 UTC (4 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| donatj wrote:
| We've been using SortableJS for years for similar functionality.
|
| https://sortablejs.github.io/Sortable/
| strongpigeon wrote:
| 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.
| zatarc wrote:
| Cannot believe they missed the opportunity to call it
| "Dragmatic".
| pqdbr wrote:
| This is such a cool name that I'd open an issue and suggest the
| rebranding :)
| svieira wrote:
| Looks like it's the successor to
| https://github.com/atlassian/react-beautiful-dnd given
| https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma...
| flaburgan wrote:
| 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
| bradyd wrote:
| Looks like they have a helper package for easy migration:
|
| https://github.com/atlassian/pragmatic-drag-and-
| drop/tree/ma...
|
| Edit: Here are the docs:
| https://atlassian.design/components/pragmatic-drag-and-
| drop/...
| cjen wrote:
| 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...)
| windowshopping wrote:
| 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.
| worldsayshi wrote:
| >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.
| pieperz wrote:
| Do you do any consulting? Would love some help on something
| similar? @pieperz on twitter.
| andy800 wrote:
| To be fair, this is like saying Legos aren't appropriate for
| building a house or a pocket calculator isn't appropriate for
| analyzing a particles accelerator -- simple tools are great
| for their intended use case but you need much more advanced
| tools for complex scenarios.
|
| With that said, I agree that emulating playing cards is
| tricky, I'm curious what you used. I built
| https://play.cheatatbj.com using ZimJS (whose web site looks
| kind of like a joke but is actually a very impressive
| animation framework).
| brosky117 wrote:
| 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.
| windowshopping wrote:
| Can you link to the form builder? I'm interested to see.
| xyst wrote:
| 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.
| zdragnar wrote:
| 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.
| tambourine_man wrote:
| Drag and drop between tabs/windows is pretty remarkable, though I
| wonder if users would even try such a thing to justify the
| increased complexity.
| strongpigeon wrote:
| 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.
| satvikpendem wrote:
| 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.
| tambourine_man wrote:
| I didn't know that, I'll look into it, thanks
| pupppet wrote:
| The tree example is pretty nice, dragging to different levels is
| always a crapshoot with these libraries.
___________________________________________________________________
(page generated 2024-04-24 23:00 UTC)