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

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&#x2F;dnd is the most popular).<p>In the interim I&#x27;ve found <a href="https:&#x2F;&#x2F;dndkit.com" rel="nofollow">https:&#x2F;&#x2F;dndkit.com</a> a _really_ nice solution, but it&#x27;s only available in React-land.<p>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...)

Hi all,<p>I am one of the creators of Pragmatic drag and drop (and react-beautiful-dnd).<p>Thanks for the post @NeilSmith2048!<p>I have had a quick read over the comments on this thread, and here is some information that folks might find helpful:<p>- 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.<p>- 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<p>- 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<p>- 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: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=5SQkOyzZLHM" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=5SQkOyzZLHM</a><p>- 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!)<p>- Pragmatic drag and drop is already powering drag and drop in some of the biggest software products, including Trello, Jira and Confluence.<p>- 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<p>- It works with multi drag. We already have multi drag in a few places in production, but we currently don&#x27;t have public guidance or an example (work in progress!)<p>I am happy to answer questions folks might have. It&#x27;s a public holiday here in Australia, so I might not be able to reply to things until tomorrow.<p>Cheers

I got to work with Alex on the precursor to this while I was at Atlassian. He&#x27;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&#x27;s so much work behind the scenes that happens to make these drag and drop interactions feel natural.

We&#x27;ve been using SortableJS for years for similar functionality.<p><a href="https:&#x2F;&#x2F;sortablejs.github.io&#x2F;Sortable&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sortablejs.github.io&#x2F;Sortable&#x2F;</a>

I can&#x27;t get this to work reliably on mobile firefox, and I don&#x27;t see any non-react examples which is strange given their value pitch is &quot;use any front-end&quot;. Sortable works everywhere and has nice simple examples: <a href="https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Sortable">https:&#x2F;&#x2F;github.com&#x2F;SortableJS&#x2F;Sortable</a>

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&#x27;s much harder to precisely click, so the deadzone required to distinguish a click from a drag has to be much larger.<p>But whether it&#x27;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&#x27;re trying to drag on a <i>resistive</i> touchscreen where more force is required, too.<p>I feel that the copy-paste workflow of pick source -&gt; copy -&gt; pick destination -&gt; paste is actually easier (and much more prevalent!) than pick -&gt; hold AND move -&gt; drop. It also works better in windowed systems because you can more easily interact with the window system while &quot;holding&quot; the thing; this is often impossible or more difficult while using DnD and having to hold down the primary button.<p>(some drawing tools actually recognize this by having different tools&#x2F;cursors for &quot;select items&quot; and &quot;move item(s)&quot;. 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 &quot;click to pick up, click to drop&quot; to holding.)

Cannot believe they missed the opportunity to call it &quot;Dragmatic&quot;.

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.<p>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.

Maybe it&#x27;s totally unjustified, but I instinctively shudder seeing &quot;UI&quot; and &quot;Atlassian&quot; in the same context. Jira might be the only thing worse than MS Teams that I [am forced to] use on the daily basis.

Drag and drop between tabs&#x2F;windows is pretty remarkable, though I wonder if users would even try such a thing to justify the increased complexity.

I&#x27;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&#x27;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&#x27;s the value of stars these days for an individual developer consuming the code?

Looks like it&#x27;s the successor to <a href="https:&#x2F;&#x2F;github.com&#x2F;atlassian&#x2F;react-beautiful-dnd">https:&#x2F;&#x2F;github.com&#x2F;atlassian&#x2F;react-beautiful-dnd</a> given <a href="https:&#x2F;&#x2F;github.com&#x2F;atlassian&#x2F;pragmatic-drag-and-drop&#x2F;tree&#x2F;main&#x2F;packages&#x2F;react-beautiful-dnd-migration">https:&#x2F;&#x2F;github.com&#x2F;atlassian&#x2F;pragmatic-drag-and-drop&#x2F;tree&#x2F;ma...</a>

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

Are we expected to be able to drag and drop elements in the List and Board examples, on mobile browsers? I can&#x27;t, but I look forward to trying on a computer.<p><a href="https:&#x2F;&#x2F;atlassian.design&#x2F;components&#x2F;pragmatic-drag-and-drop&#x2F;examples&#x2F;" rel="nofollow">https:&#x2F;&#x2F;atlassian.design&#x2F;components&#x2F;pragmatic-drag-and-drop&#x2F;...</a>

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.<p>I hope that can be tuned with the library but otherwise it looks pretty good.<p>edit: I really wish there was an ability to move multiple items at once. Or maybe I haven’t figured it out on mobile.

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

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

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

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

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!

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

So this is an alternative to Sortable &amp; Gridstack?

How does this compare with Dragula.js