Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

41–50 of 80 posts

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

#41

Post by alluro2 »

cjen wrote: post #6

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…

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

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

#42

Post by dleeftink »

donatj wrote: post #2

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

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

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

#43

Post by tambourine_man »

qingcharles wrote: post #37
tambourine_man wrote: post #10

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.

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.

Copy/pasting uses the clipboard, which is already shared across the whole system. Seems simpler.

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

#44

Post by Woovie »

dleeftink wrote: post #42
donatj wrote: post #2

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

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

I Agree, the tree is simply amazing. I had never tried sortable but felt immediately impressed there.

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

#45

Post by H1Supreme »

satvikpendem wrote: post #18
strongpigeon wrote: post #14

Earlier quoted context omitted.

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.

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.

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.

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

#46

Post by eezing »

zdragnar wrote: post #13
xyst wrote: post #8

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 ou…

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.

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?

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

#48

Post by alexreardon »

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

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

#50

Post by alexreardon »

jjcm wrote: post #34

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.

Hey Jake. Thanks for the kind words
Post reply on HN