9 ms·

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

370 points by NeilSmith2048 2y ago

Aeolun 2y ago
I’m just not enthused about anything released by Atlassian. It’s almost invariably an afterthought that only exists for their own products.
- alternatex 2y ago
  Appears to be ripped out of their best product (IMO) - Trello. The one they didn't build themselves.
donatj 2y ago
We've been using SortableJS for years for similar functionality. https://sortablejs.github.io/Sortable/ https://sortablejs.github.io/Sortable/
- dleeftink 2y ago
  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 https://observablehq.com/@dleeftink/sortable-playground
  - Woovie 2y ago
    I Agree, the tree is simply amazing. I had never tried sortable but felt immediately impressed there.
strongpigeon 2y ago
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 2y ago
Cannot believe they missed the opportunity to call it "Dragmatic".
- pqdbr 2y ago
  This is such a cool name that I'd open an issue and suggest the rebranding :)
  - fuzzythinker 2y ago
    They won't even need a new logo, as they can just rotate the "p" 180 degrees.
svieira 2y ago
Looks like it's the successor to https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd given https://github.com/atlassian/pragmatic-drag-and-drop/tree/main/packages/react-beautiful-dnd-migration https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma...
- flaburgan 2y ago
  Yeah, I hope the migration is not going to be too painful because https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd is a key component in one of my important project
  - bradyd 2y ago
    Looks like they have a helper package for easy migration: https://github.com/atlassian/pragmatic-drag-and-drop/tree/main/packages/react-beautiful-dnd-migration https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma... Edit: Here are the docs: https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/react-beautiful-dnd-migration/about https://atlassian.design/components/pragmatic-drag-and-drop/...
cjen 2y ago
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 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 2y ago
  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 2y ago
    >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 2y ago
      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.
xyst 2y ago
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 2y ago
  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 2y ago
    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 2y ago
  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?
mostlysimilar 2y ago
[flagged]
- deleted 2y ago
  [deleted]
- tacker2000 2y ago
  Jira is actually quite fast these days, compared to a couple of years ago.
  - nosefurhairdo 2y ago
    Unless your org is still running a legacy version on their own data center!
  - iainmerrick 2y ago
    I keep hearing this, and/or “it’s fast if you self-host”, or “it’s fast as long as you don’t install a bunch of plugins”. I look forward to experiencing this some day. In the meantime Jira still seems really slow.
- cqqxo4zV46cp 2y ago
  Team-managed projects! Jira is, for the most part, quite sensible these days. Of course, a lot HN Jira hate really comes from people that were beholden to misfiring top-down processes, which Jira was a reflection of.
tambourine_man 2y ago
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 2y ago
  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 2y ago
    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 2y ago
      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 2y ago
    I didn't know that, I'll look into it, thanks
- qingcharles 2y ago
  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 2y ago
    Copy/pasting uses the clipboard, which is already shared across the whole system. Seems simpler.
pupppet 2y ago
The tree example is pretty nice, dragging to different levels is always a crapshoot with these libraries.
deleted 2y ago
[deleted]
eyegor 2y ago
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 https://github.com/SortableJS/Sortable
jjcm 2y ago
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 2y ago
  Hey Jake. Thanks for the kind words
smoyer 2y ago
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 2y ago
  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 2y ago
In a recent project the drag and drop features caused the most frustration. There are surprisingly very few solutions to this issue.
alexreardon 2y ago
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 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 2y ago
  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?
  - 2y ago
krick 2y ago
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.
- stoperaticless 2y ago
  [flagged]
- vidarh 2y ago
  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.
hcfman 2y ago
[flagged]
Rapzid 2y ago
Anyone know how this compares to the hooks in React Aria?
nkko 2y ago
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 2y ago
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 2y ago
  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.
- w10-1 2y ago
  To avoid strain and accuracy requirements, iOS (and I imagine Android) support Accessibility extensions targeting drag motions - See Accessibility/Touch/AssistiveTouch. It seems fair to have the logical gesture of a drag be provided accessibility support on a per-device basis. To the extent that any UI library is written in terms of underlying mouse clicks and locations, it would interfere with that support. So the real question is whether the UI library support for DnD can be managed using device accessibility.
dartos 2y ago
The funny thing about this is that they don’t use it in trello
- alexreardon 2y ago
  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.
  - dartos 2y ago
    Ah I must’ve been getting it confused with atlassians other drag n drop package. https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd
mkj 2y ago
Only slightly related, but does anyone have details of how Atlassian are doing their internal monorepo?
- electric_muse 2y ago
  I was surprised to read that, too. I would love to hear more about it.
Alifatisk 2y ago
So this is an alternative to Sortable & Gridstack?
AndyKluger 2y ago
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/examples/ https://atlassian.design/components/pragmatic-drag-and-drop/...
rnewme 2y ago
How does this compare with Dragula.js

370 points by NeilSmith2048 2y ago

I’m just not enthused about anything released by Atlassian. It’s almost invariably an afterthought that only exists for their own products.

alternatex 2y ago
Appears to be ripped out of their best product (IMO) - Trello. The one they didn't build themselves.

donatj 2y ago

We've been using SortableJS for years for similar functionality. https://sortablejs.github.io/Sortable/ https://sortablejs.github.io/Sortable/

dleeftink 2y ago
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 https://observablehq.com/@dleeftink/sortable-playground
- Woovie 2y ago
  I Agree, the tree is simply amazing. I had never tried sortable but felt immediately impressed there.

strongpigeon 2y ago

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 2y ago

Cannot believe they missed the opportunity to call it "Dragmatic".

pqdbr 2y ago
This is such a cool name that I'd open an issue and suggest the rebranding :)
- fuzzythinker 2y ago
  They won't even need a new logo, as they can just rotate the "p" 180 degrees.

svieira 2y ago

Looks like it's the successor to https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd given https://github.com/atlassian/pragmatic-drag-and-drop/tree/main/packages/react-beautiful-dnd-migration https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma...

flaburgan 2y ago
Yeah, I hope the migration is not going to be too painful because https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd is a key component in one of my important project
- bradyd 2y ago
  Looks like they have a helper package for easy migration: https://github.com/atlassian/pragmatic-drag-and-drop/tree/main/packages/react-beautiful-dnd-migration https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma... Edit: Here are the docs: https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/react-beautiful-dnd-migration/about https://atlassian.design/components/pragmatic-drag-and-drop/...

cjen 2y ago

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 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 2y ago
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 2y ago
  >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 2y ago
    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.

xyst 2y ago

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 2y ago
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 2y ago
  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 2y ago
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?

mostlysimilar 2y ago

[flagged]

deleted 2y ago
[deleted]
tacker2000 2y ago
Jira is actually quite fast these days, compared to a couple of years ago.
- nosefurhairdo 2y ago
  Unless your org is still running a legacy version on their own data center!
- iainmerrick 2y ago
  I keep hearing this, and/or “it’s fast if you self-host”, or “it’s fast as long as you don’t install a bunch of plugins”. I look forward to experiencing this some day. In the meantime Jira still seems really slow.
cqqxo4zV46cp 2y ago
Team-managed projects! Jira is, for the most part, quite sensible these days. Of course, a lot HN Jira hate really comes from people that were beholden to misfiring top-down processes, which Jira was a reflection of.

tambourine_man 2y ago

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 2y ago
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 2y ago
  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 2y ago
    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 2y ago
  I didn't know that, I'll look into it, thanks
qingcharles 2y ago
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 2y ago
  Copy/pasting uses the clipboard, which is already shared across the whole system. Seems simpler.

pupppet 2y ago

The tree example is pretty nice, dragging to different levels is always a crapshoot with these libraries.

deleted 2y ago

[deleted]

eyegor 2y ago

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 https://github.com/SortableJS/Sortable

jjcm 2y ago

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 2y ago
Hey Jake. Thanks for the kind words

smoyer 2y ago

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 2y ago
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 2y ago

In a recent project the drag and drop features caused the most frustration. There are surprisingly very few solutions to this issue.

alexreardon 2y ago

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 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 2y ago
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?
- 2y ago

krick 2y ago

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.

stoperaticless 2y ago
[flagged]
vidarh 2y ago
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.

hcfman 2y ago

[flagged]

Rapzid 2y ago

Anyone know how this compares to the hooks in React Aria?

nkko 2y ago

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 2y ago

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 2y ago
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.
w10-1 2y ago
To avoid strain and accuracy requirements, iOS (and I imagine Android) support Accessibility extensions targeting drag motions - See Accessibility/Touch/AssistiveTouch. It seems fair to have the logical gesture of a drag be provided accessibility support on a per-device basis. To the extent that any UI library is written in terms of underlying mouse clicks and locations, it would interfere with that support. So the real question is whether the UI library support for DnD can be managed using device accessibility.

dartos 2y ago

The funny thing about this is that they don’t use it in trello

alexreardon 2y ago
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.
- dartos 2y ago
  Ah I must’ve been getting it confused with atlassians other drag n drop package. https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd

mkj 2y ago

Only slightly related, but does anyone have details of how Atlassian are doing their internal monorepo?

electric_muse 2y ago
I was surprised to read that, too. I would love to hear more about it.

Alifatisk 2y ago

So this is an alternative to Sortable & Gridstack?

AndyKluger 2y ago

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/examples/ https://atlassian.design/components/pragmatic-drag-and-drop/...

rnewme 2y ago

How does this compare with Dragula.js