[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 : 336 points
Date : 2024-04-24 18:25 UTC (1 days 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/
| dleeftink wrote:
| Maybe I'm easy to impress, but I always stop and play around
| with the nested tree example when I come across Sortable. It
| works so flawlessly, and feels very tuned to mobile dnd. It
| even works to arrange (and reflow) inline spans in a paragraph!
| I have yet to come across this functionality in a text editor..
|
| [0]: https://observablehq.com/@dleeftink/sortable-playground
| Woovie wrote:
| I Agree, the tree is simply amazing. I had never tried
| sortable but felt immediately impressed there.
| 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 :)
| fuzzythinker wrote:
| They won't even need a new logo, as they can just rotate the
| "p" 180 degrees.
| 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.
| windowshopping wrote:
| Yes. My UI's functionality was what I would personally
| describe as "unbelievably complicated," but I don't know
| how I would have done it without the modularity of React.
| It's a full-blown sandbox for playing Magic: The Gathering.
| I'm sure it could be done otherwise, but React is what I
| know and it didn't make sense to me to work in something I
| didn't know rather than something I knew well.
| pieperz wrote:
| Do you do any consulting? Would love some help on something
| similar? @pieperz on twitter.
| windowshopping wrote:
| I've got my hands pretty full with another project and
| unfortunately I don't use Twitter anymore since it became
| X. If you'd like, though, I can send an email to your quilt
| store's contact email (team@) and you can reply to that to
| tell me a bit more about what you're trying to do, and if I
| can give any genuinely useful suggestions as to how I would
| go about it, I will do so. But I realize technical advice
| != actual developer hours and if that's not so helpful, no
| worries.
| loceng wrote:
| Can I inquire why you decided to jump ship on X?
|
| If something(s) changed there would you have stayed or
| would you return?
|
| By measurable account he's made the platform better
| overall, contrary to certain propaganda narrative talking
| points.
|
| He did of course make Twitter-X less of a bubble machine,
| which arguably is bad for society because then
| ideological mobs with certain unchallenged ideas or
| beliefs go unchallenged (doesn't matter what "side"
| you're on, there are extreme and bad-wrong ideas on
| both/all) - so you'd begin to get exposed to content that
| may make you uncomfortable. If you're not able to quickly
| scan through it and not react so you just move on, it
| would become a tiresome and a challenge.
|
| You could go "full bubble" like Instagram recently did
| though and create a setting default on to not show you
| "political" content from people you don't follow -
| arguably adding to the detriment of society, and of a
| seeming concerted effort by bad actors towards division
| and conquering us by helping reinforce the bubble walls.
| robbiep wrote:
| I find your perspective fascinating but I never 'got'
| Twitter. My current perspective is that a bunch of idiots
| are loudly shouting the shortest/most successful piece of
| mimetic garbage has currently evolved and the day I see
| something useful arise out of that morass of RNA-analogue
| I'll be amazed but until then I wish it would stop taking
| attention away from larger more nuanced conversations
| which are more than a couple hundred base pairs (or
| tokens) long that we need to be having in order to
| navigate our current waters
| 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).
| windowshopping wrote:
| I didn't use anything for DND, I wrote that all by hand. I
| used React, Pullstate for a state store, and PubSubJS. All
| of them are great to work with, although this was really,
| _really_ pushing the limits of what React is made to
| accomodate. If you play Magic: The Gathering you can check
| it out by starting a mirror-match by yourself at "ca rd
| tav ern dot com" with the spaces removed (don't want this
| comment showing up in search results), but it would require
| you to make a deck since I haven't gotten around to adding
| default starter decks to new accounts yet. (The site was
| largely finished but never launched or shared.)
| lelanthran wrote:
| > https://play.cheatatbj.com/
|
| What's the point of this? To get better at blackjack?
|
| I ask because I did a blackjack trainer to train me via
| repetition on perfect play (circa 2008). Still one or two
| things left unimplemented to this day, though, but over the
| course of playing a few games a day over months, I
| definitely _did_ get better (losing _less_ over time than I
| used to :-))
| stevenkkim wrote:
| Could you share a link to your game? I'd love to check it
| out.
| windowshopping wrote:
| See my other comment on this thread! Don't want to copy
| paste it, feels spammy.
| pryelluw wrote:
| I'm just wrapping up a project at work with similar
| constraints and share the same experiences. Good library,
| best used for simpler use cases. Drag and drop across
| browsers and devices is still not a smooth dev experience.
| Dnd did improve it a lot and performance issues are not
| noticeable to the end user in our use case. Hopefully the new
| version that comes out continues to be as good.
| 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.
| alluro2 wrote:
| dndkit seemed very promising, until I realized the state of
| development [0], and critical performance issues if you want to
| use it for larger lists (individual issues linked within [0]).
| So it's fine if you need to use it for simple scenarios and a
| smaller number of items, but otherwise, it's inadequate in
| current state, unfortunately...The fact that the post was in
| Aug 2023, perf. issues still remain and there's low activity on
| issues in general, doesn't bode well...
|
| [0] - https://github.com/clauderic/dnd-kit/issues/1194
| 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.
| eezing wrote:
| Slightly slower is an understatement. Absolutely useless on
| touch. No fault of Atlassian, but why use the HTML 5 API
| knowing it's trash on mobile?
| Nathanael_M wrote:
| Yeah, this is very confusing to me. The examples barely
| function on an iPhone. Is it just this specific implementation
| or is it a foundational issue with the library?
| 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.
| H1Supreme wrote:
| The styling options are baffling to me. Did they reference
| any existing libraries when building this feature out? I
| think the drag and drop functionality is fine, but the lack
| of any sensible styling (reorder and drop animations in
| particular) makes it nearly unusable.
| tambourine_man wrote:
| I didn't know that, I'll look into it, thanks
| qingcharles wrote:
| I think the site builder in Wordpress 6 supports this?
| Certainly you can copy/paste some extensive elements between
| tabs and I use it all the time.
| tambourine_man wrote:
| Copy/pasting uses the clipboard, which is already shared
| across the whole system. Seems simpler.
| pupppet wrote:
| The tree example is pretty nice, dragging to different levels is
| always a crapshoot with these libraries.
| eyegor wrote:
| I can't get this to work reliably on mobile firefox, and I don't
| see any non-react examples which is strange given their value
| pitch is "use any front-end". Sortable works everywhere and has
| nice simple examples: https://github.com/SortableJS/Sortable
| jjcm wrote:
| I got to work with Alex on the precursor to this while I was at
| Atlassian. He's such a delight to work with. I was a prototyper
| at the time and I was always surprised about the types of edge
| cases he would come to me with - things I would have never even
| considered testing. There's so much work behind the scenes that
| happens to make these drag and drop interactions feel natural.
| alexreardon wrote:
| Hey Jake. Thanks for the kind words
| smoyer wrote:
| I spent the afternoon editing a document in Atlassian Confluence
| ... It reminded me of the old MS-DOS days when I could
| occasionally out-type the computer (only slower.) I hope they use
| this to improve their own products!
| stoperaticless wrote:
| Actually, drang n drop is the festure, I never had problem in
| atlassian products.
|
| Sure, their slow'ish, and went so many extra miles to torture
| people who use keyboard hotkeys (who could ever want to use
| standard ctrl+f...), but dnd part always just worked.
| WhatIsAModel wrote:
| In a recent project the drag and drop features caused the most
| frustration. There are surprisingly very few solutions to this
| issue.
| alexreardon wrote:
| Hi all,
|
| I am one of the creators of Pragmatic drag and drop (and react-
| beautiful-dnd).
|
| Thanks for the post @NeilSmith2048!
|
| I have had a quick read over the comments on this thread, and
| here is some information that folks might find helpful:
|
| - The web platform has powerful built in drag and drop
| functionality. Sadly though, that functionality has historically
| difficult to be successful with due to bugs, inconsistencies and
| API friction.
|
| - Pragmatic drag and drop is low level wrapper around web
| platform drag and drop and is attempting to provide a fast, safe
| and (hopefully) easy way to successfully unlock the power of the
| web platform
|
| - You can use Pragmatic drag and drop with any tech stack
| (svelte, vue, react, vanillajs etc) and you can use it to build
| _any_ drag and drop experience you like
|
| - We have optimised Pragmatic drag and drop for performance and
| flexibility. It consists of a small core and lots of optional
| pieces. The big idea is that folks only ever need to include the
| code they need for their experience. Small pieces also allows
| folks to borrow as much as they can and only build the specific
| pieces they need for bespoke experiences. More details:
| https://www.youtube.com/watch?v=5SQkOyzZLHM
|
| - We make it easy to attach data for external windows and
| applications, and to receive data from them (and you only pay
| code for that functionality if you want it!)
|
| - Pragmatic drag and drop is already powering drag and drop in
| some of the biggest software products, including Trello, Jira and
| Confluence.
|
| - We have design guidance and accessibility guidance and outputs
| which folks are welcome to use, or you can create your own design
| and accessibility solutions
|
| - It works with multi drag. We already have multi drag in a few
| places in production, but we currently don't have public guidance
| or an example (work in progress!)
|
| I am happy to answer questions folks might have. It's a public
| holiday here in Australia, so I might not be able to reply to
| things until tomorrow.
|
| Cheers
| Nathanael_M wrote:
| Really wonderful. I'm working on a ~relatively~ large web app
| and I just wrote drag and drop off as an option for form
| construction and report building, but this may put it back on
| the table. Thanks a lot!
|
| I did notice some pretty intense issues using the examples on
| mobile. Is that just an issue with the examples, or is it
| something more foundational?
| alexreardon wrote:
| It would be great to grab some details. Probably easiest to
| track if you head over to the Github repo and raise an issue
| as we have a bug template which helps us gather the
| information we need to action things
|
| https://github.com/atlassian/pragmatic-drag-and-drop/issues
| ty_2k wrote:
| Thanks so much for all your hard work on both of these awesome
| libraries. react-beautiful-dnd (and @hello-pangea's fork) have
| been really nice to use. Excited to try pragmatic-drag-and-
| drop!
| krick wrote:
| Maybe it's totally unjustified, but I instinctively shudder
| seeing "UI" and "Atlassian" in the same context. Jira might be
| the only thing worse than MS Teams that I [am forced to] use on
| the daily basis.
| vidarh wrote:
| I had the same reaction. But looked at this and it does feel
| quite nice. I think most of the pain of Jira is not so much in
| the visual UI bit but in the overall morass of clunky flows.
| Rapzid wrote:
| Anyone know how this compares to the hooks in React Aria?
| Aeolun wrote:
| I'm just not enthused about anything released by Atlassian. It's
| almost invariably an afterthought that only exists for their own
| products.
| alternatex wrote:
| Appears to be ripped out of their best product (IMO) - Trello.
| The one they didn't build themselves.
| nkko wrote:
| I'm here for the phenomenon of the GitHub stars on this repo.
| Which was quite a weird event. Even with just the readme in the
| repo they got a crazy number of stars and were on GitHub trending
| for a day or two. What's with that? Are there just so many front-
| end developers, is it possible that DND is such a huge unsolved
| pain, is it just cause its Atlassian, did they sent a mass
| e-mail? I am honestly confused? What's the value of stars these
| days for an individual developer consuming the code?
| pjc50 wrote:
| This is off topic a bit, and not a criticism of this library or
| its authors, but: I do think that DnD is bad for accessibility.
| Especially on mobile, where it's much harder to precisely click,
| so the deadzone required to distinguish a click from a drag has
| to be much larger.
|
| But whether it's on a mouse, trackpad, touchscreen, trackpoint,
| or other more esoteric system, it requires a muscle hold while
| doing a precise movement along another axis. And this can be more
| difficult and RSI-inducing. God help you if you're trying to drag
| on a _resistive_ touchscreen where more force is required, too.
|
| I feel that the copy-paste workflow of pick source -> copy ->
| pick destination -> paste is actually easier (and much more
| prevalent!) than pick -> hold AND move -> drop. It also works
| better in windowed systems because you can more easily interact
| with the window system while "holding" the thing; this is often
| impossible or more difficult while using DnD and having to hold
| down the primary button.
|
| (some drawing tools actually recognize this by having different
| tools/cursors for "select items" and "move item(s)". The old
| Acorn Archimedes used a different mouse button (middle) reserved
| for DnD. I feel it could work well with a stylus with a button
| too. But in both those cases I would prefer "click to pick up,
| click to drop" to holding.)
| DrScientist wrote:
| Totally agree - that drag and drop is over-rated.
|
| The only area I think where drag and drop has an advantage is
| if you want to be precise about where you drop and thus
| realtime feedback about where it will drop is useful.
|
| ie drag and drop effectively adds a mode while you are dragging
| - and as such you can have mode sensitive UI feedback that
| operates only in that mode - not so easy with cut and paste -
| the UI doesn't know you are about to paste.
| dartos wrote:
| The funny thing about this is that they don't use it in trello
| alexreardon wrote:
| Pragmatic drag and drop is already being used to power drag and
| drop for Trello boards. There is some sprinkling of other drag
| and drop interactions around Trello - which have moved, or are
| moving to, Pragmatic drag and drop.
| mkj wrote:
| Only slightly related, but does anyone have details of how
| Atlassian are doing their internal monorepo?
| electric_muse wrote:
| I was surprised to read that, too. I would love to hear more
| about it.
| Alifatisk wrote:
| So this is an alternative to Sortable & Gridstack?
| AndyKluger wrote:
| Are we expected to be able to drag and drop elements in the List
| and Board examples, on mobile browsers? I can't, but I look
| forward to trying on a computer.
|
| https://atlassian.design/components/pragmatic-drag-and-drop/...
| rnewme wrote:
| How does this compare with Dragula.js
___________________________________________________________________
(page generated 2024-04-25 23:02 UTC)