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...)
- 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.
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).
Did you write it in react? This is really one of the use cases where React can become a hindrance.
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
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?
I found the documentation really hard to work through (no examples that don't require wading through hundreds of lines of JS/React, no API documentation?), and at the time I was looking, half the links were broken and the doc site was really, really slow.
The library says it works with any tech stack, but only lists JavaScript frameworks.
The reason we use SortableJS is because we don't have to rewrite the HTML manually as things get dragged around - from what I could glean, things like the placeholder drop line have to be added as part of your rendering template?
[0]: https://observablehq.com/@dleeftink/sortable-playground
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.)
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.
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.
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.
https://github.com/atlassian/pragmatic-drag-and-drop/tree/ma...
Edit: Here are the docs: https://atlassian.design/components/pragmatic-drag-and-drop/...
https://atlassian.design/components/pragmatic-drag-and-drop/...
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.
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.
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.
