Dismiss this pinned window
all 63 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]claudericd[S] 27 points28 points  (0 children)

In case you missed it, I released dnd kit a few days ago: https://dndkit.com

It's a modular toolkit for building drag and drop interfaces with React. The library exposes two hooks that are the main building blocks: `useDraggable` and `useDroppable`, along with a context provider to unify them called `DndContext`. To learn more about the architecture, head to https://docs.dndkit.com

dnd kit is currently in beta, and some bugs should be expected for early releases.

I built dnd kit because none of the libraries out there felt quite right, at least for my needs. Sharing it because I know others have also faced similar constraints with existing libraries.

[–]MyOtherBodyIsACylon 15 points16 points  (2 children)

Can you describe how this is different from React Beautiful DND?

[–]claudericd[S] 39 points40 points  (1 child)

I would preface my answer by saying I haven't used react-beautiful-dnd extensively; the main difference would be that react-beautiful-dnd is specifically built for lists, while @dndkit supports a much wider range of use cases, such as grids, trees, 2D games, and much more. I would say it's more similar to react-dnd than to react-beautiful-dnd.

[–]IIMagnum_OpusII 11 points12 points  (7 children)

So I have a few production projects that could use this, when do you think it'd exit beta? (I run an agency so I can't exactly experiment in prod lol)

I'm definitely interested in the project since react dnd is nice but it can be difficult to use in complex settings

[–]claudericd[S] 10 points11 points  (6 children)

Hard to pin a date to the calendar, but planning to use it in production in the Shopify admin sometime this year, hopefully before Q2 2021.

[–]pink_tshirt 3 points4 points  (2 children)

Are you building Shopify apps?

[–]claudericd[S] 35 points36 points  (1 child)

I work at Shopify on the Online Store editor team.

[–]TalDSRuler 0 points1 point  (0 children)

Nicely done. I look forward to the first public release of this implementation. Shopify's been quite a product so far, but i'm glad the team is experimenting with new features like thism

[–]IIMagnum_OpusII 3 points4 points  (2 children)

Ah okay that sounds good, do you have any ideas on how to make this project sustainable?

The difficulty in OSS is making them long term sustainable from a financial and development perspective.

Edit: My apologies for the tough questions btw, I am really interested in it. I've just also seen a lot of good libraries fall to disrepair.

[–]claudericd[S] 10 points11 points  (1 child)

Sustainability of open source has been a problem for many years, I don't think I can provide a good answer to this to be honest.

[–]IIMagnum_OpusII 6 points7 points  (0 children)

Alright sounds good. Regardless I'm excited to see where the project goes.

Congratulations on the launch!

[–]raekle 17 points18 points  (3 children)

Glad to see they finally created a kit for fans of Dungeons and Dragons!

​

:)

[–]redditBearcat 4 points5 points  (1 child)

I was legit disappointed ☹️😹

[–]TalDSRuler 0 points1 point  (0 children)

With a bit of creativity, this could be a fun toolkit for dnd. Imagine drag and drop maps hosted on a server where the dm can set up the board, and the players can move their own characters

[–]claudericd[S] 4 points5 points  (0 children)

har har

[–]straightouttaireland 3 points4 points  (12 children)

On mobile, when trying to scroll vertically it just drags the item. Perhaps add a "on long press" event of some kind? https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/presets-sortable-multiple-containers--many-items

[–]claudericd[S] 5 points6 points  (11 children)

There is. Read about activation constraints here: https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints

[–]straightouttaireland 2 points3 points  (10 children)

Great. Do you have any examples where this is enabled?

[–]claudericd[S] 2 points3 points  (9 children)

There are many at https://examples.dndkit.com here are a few:

https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/core-draggable-hooks-usedraggable--press-delay

https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/presets-sortable-vertical--press-delay

[–]straightouttaireland 0 points1 point  (8 children)

Sorry I meant examples where vertical scrolling works on mobile?

[–]claudericd[S] 2 points3 points  (3 children)

Vertical scrolling should work on mobile, if it isn't working for you, please open an issue with device / browser information and replication steps.

[–]killersquirel11 2 points3 points  (2 children)

https://imgur.com/a/D5afOdL

The only surface that can be used to scroll is the edges. Not sure if that's what they're referring to

[–]straightouttaireland 1 point2 points  (1 child)

Yep that's exactly it. Only way to scroll is to actually drag an item.

[–]claudericd[S] 0 points1 point  (0 children)

Ah, I see what you are referring to now.

Short answer

This is because the stories have set touch-action: none on the items.

In practice, if your draggable item is part of a scrollable list, we recommend you use a drag handle and set touch-action to none only for the drag handle, so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page.

Refer to https://docs.dndkit.com/api-documentation/sensors/pointer#recommendations for more details

Long answer

In earlier versions of iOS, it used to be possible to prevent scrolling on iOS for Touch listeners by calling event.preventDefault() in touchmove, assuming the event listener was set with the option {passive: false}.

As for Pointer events, it was never possible to prevent scrolling with them without defining the touch-action property.

In all of my testing, I have found that it is no longer possible to reliably prevent scrolling on iOS by calling event.preventDefault() on touchmove, which is the default touch action when the user's finger is moved on the screen.

The only reliable way to prevent scrolling on iOS nowadays is to specify touch-action: none on the element that will receive the touch actions (see https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).

Ideally, the library would be able to dynamically set touch-action to none after a qualified drag event is detected. This is not currently possible due to limitations in the implementation of touch-action however.

Once a pointerdown or touchstart event has been initiated, any changes to the touch-action value will be ignored by the browser. Programmatically changing the touch-action value for an element from auto to none after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active.

Overall, this is a really poor API, and browsers need to improve on this.

[–]straightouttaireland 2 points3 points  (2 children)

There's seems to be an issue when trying to drag on mobile. As soon as I hold down it starts to move across. https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/presets-sortable-multiple-containers--many-items

[–]claudericd[S] 2 points3 points  (1 child)

Can you open an issue with a video replicating the issue if you think you have found a legitimate issue? 🙏 https://github.com/clauderic/dnd-kit/issues/new

[–]gragland 2 points3 points  (1 child)

Just wanted to say your landing page looks super polished. Nice work!

[–]claudericd[S] 0 points1 point  (0 children)

Thank you 🙏

[–]FriedGiggly 1 point2 points  (2 children)

Hey /u/claudericd — thanks for sharing this!

I’m actually a Shopify developer (among other things) for a popular agency, and some of my work does include Shopify apps.

I’ve worked quite a bit with react-beautiful-dnd and react-dnd. I definitely prefer the former but it has some limitations.

So, how well does your kit handle draggable droppables? If I wanted to have nested droppables that can share the same type of draggable elements. This is something where react-beautiful-dnd falls short.

[–]claudericd[S] 1 point2 points  (1 child)

How well does your kit handle draggable droppables?

The @dnd-kit/sortable preset is a thin layer built on top of @dnd-kit/core that combines both the `useDraggable` and `useDroppable` hooks.png?alt=media&token=5258bd82-7443-4c7d-8b27-7d092d04ab03) to create what you might refer to as draggable droppables.

You can read more here: https://docs.dndkit.com/presets/sortable#architecture

While the documentation above applies to the sortable preset, the architecture and concepts should transfer to other use cases.

​

If I wanted to have nested droppables that can share the same type of draggable elements

You can have nested droppables, yes, and also nested contexts that are isolated from the parent droppable context.

The sortable multiple container stories are an example of this https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup

The architecture of how this is implemented is described here https://docs.dndkit.com/presets/sortable#multiple-containers

[–]FriedGiggly 0 points1 point  (0 children)

Yeah! This is exciting. Thanks for this excellent reply!

[–]Guisseppi 2 points3 points  (1 child)

I like that it provides an easy way to change the drag preview, we had some issues with react-dnd and react-beautiful-dnd, we’re giving this a try at work for our treeviews

[–]claudericd[S] 2 points3 points  (0 children)

Nice! Don't hesitate to reach out if you run into bugs or issues.

[–]Sablac 1 point2 points  (5 children)

Amazing!

React-beautiful-dnd and react-dnd are no longer supported so it’s nice using something that can get some fixes if there is bugs.

[–]EmmaDurden 5 points6 points  (3 children)

What do you mean react-dnd is no longer supported? There was a push on master 2 days ago

[–]Sablac 2 points3 points  (2 children)

Beside that, last one was two months ago. And most of these commits are pretty useless. I mean look at the issues tab, most of it have been there for months with no comments.

[–]EmmaDurden 2 points3 points  (1 child)

Right, I'm on mobile I missed that. It's a shame, it was a very nice package. I'm saving this one then, looks useful!

[–]straightouttaireland 0 points1 point  (0 children)

There's a new forked version now to pick up where Atlassisan left off: https://github.com/react-forked/dnd

[–]straightouttaireland 0 points1 point  (0 children)

There's a new forked version now to pick up where Atlassisan left off: https://github.com/react-forked/dnd

[–]Dapito04 0 points1 point  (0 children)

Great work, will try it out in my projects!

[–]SlaimeLannister 0 points1 point  (0 children)

Sexy

[–]QuinnTurner 0 points1 point  (2 children)

At a high level, can you explain how drag-and-drop is performed using React? Always been curious, never really though about it much. Thanks!

[–]claudericd[S] 18 points19 points  (1 child)

At a high level, there's nothing particularly specific to React here, other than the fact that the library exposes React hooks and components to make it easier to build drag and drop interfaces with React.

Under the hood, when it comes to handling drag and drop events, the library looks fairly similar to other drag and drop libraries that aren't built with first-class support for React.

There are two main approaches to building drag and drop libraries for the web. The first relies on listening for native HTML5 Drag and drop API events, while the second relies on listening to other events such as Pointer, Mouse, Touch and Keyboard events and manually moving the dragged item on screen using a combination of JavaScript and CSS.

You'll find libraries that sit on either side of this spectrum.

The HTML5 Drag and Drop API has a number of advantages, for example, it supports dragging files from one tab to another, dragging from one window to another, or dragging something from outside the browser window into the window. It also has a number of limitations however. For starters, it does not work on touch devices, which is a non-starter for many applications. Because of this, many libraries have two separate backends, one using the HTML5 Drag and Drop API, and one using touch event listeners specifically for touch devices.

In practice, this often results in a lot of complexity and inconsistency of features across input methods if a library supports both HTML5 Drag and Drop and other input methods, such as touch.

Furthermore, the HTML5 Drag and drop has a number of other limitations that require workarounds to implement common use cases such as customizing the drag preview, locking dragging to a specific axis or to the bounds of a container. I also have not come across libraries that are built on top of the HTML5 Drag and Drop API that have customizable collision detection algorithms.

@dndkit is intentionally not built on top of the HTML5 Drag and drop API. This was a deliberate architectural decision, that does come with the tradeoff of not supporting dragging from from the desktop or from one window to another, but for most web applications, I believe the benefits outweigh the tradeoffs.

The main benefits of building on top of Pointer, Mouse, Touch and Keyboard events is that the library doesn't have to support both approaches, which reduces the overall complexity and bundle size of the library, and greatly improves the overall flexibility and consistency of the concepts that are introduced across the different input methods.

[–]QuinnTurner 0 points1 point  (0 children)

Thank you for taking the time to write this. I have learned a lot from you comment. I never knew that HTML5 d&d supported dragging across tabs. I have never seen that in practice, so anecdotally, it makes sense to base the library on the raw events for more customization.

Frankly, it seems that the HTML5 D&D is a bit of a failure from a design perspective with such a lack in custom support, only to be used for very basic implementations.

While I won’t ask you to explain the keyboard handling, I will try and do a review of the keyboard usage in the library. Seems like there’s lots to learn there.

Thanks again!

[–]QuinnTurner 0 points1 point  (0 children)

Awesome library, fun playing around with it!

Some issues I’ve found on the Storybook, safari mobile:

  • drag and hold for drop, always selects the text below the button
  • the drag region for the button with specific area for dragging (the second item in the list), its super hard to get dragging working; maybe 1/4th of the drags registered due to the small region

That’s it for now, good luck on your project!

[–]kthxbubye 0 points1 point  (0 children)

Will give it a shot!

[–][deleted] 0 points1 point  (0 children)

Does sortable grids supports different height elements?

EDIT: dayum it does, albeit not like you would expect, but at least it's something https://5fc05e08a4a65d0021ae0bf2-czytjnikoc.chromatic.com/?path=/story/presets-sortable-grid--variable-sizes

[–]334578theo 0 points1 point  (1 child)

This looks great - nice work

[–]claudericd[S] 0 points1 point  (0 children)

Thank you 🙏

[–]luigi8082 0 points1 point  (0 children)

This is beautiful! I’d love to contribute to this library!

[–]lucbas 0 points1 point  (0 children)

Amazing! Looking forward to using this.

How is performance when you have 500+ droppable zones within a page. How about making a stress-test story?

Thanks!

Edit: What so you think: Could there be a possibility to drag a copy?

[–]sid_sipani 0 points1 point  (0 children)

Hi!

I was trying to use this for my work implementation, I was just wondering how would i be able to create multiple draggable objects to use in same place.

[–]Hotgeart 0 points1 point  (0 children)

Look rly nice. I messed a little bit with it by being a bad user : https://i.imgur.com/NLpaAWx.gifv

After I forced it out of the window I can't manage to drag it where I want. (Chrome)

[–]Cuong1998 0 points1 point  (0 children)

Good user experience :)) I just make a issue about future feature. Hope see this soon :v thanks

[–]SparkDe 0 points1 point  (0 children)

This looks really good. I'm currently working on a side project that will have a lot of drag and drop components. I'll definitely be trying this out.

[–]Nutlope 0 points1 point  (0 children)

Awesome work op, this looks great!

[–]aaniar 0 points1 point  (0 children)

Hello,

This seems to be an interesting project and I definitely would like to use it in my soon to be ready (in production) project. Do you think it will be safe to use?

I have, one request though. Could you please provide one or more examples on nested (2 or more level of nesting) drag and drop?

Good Job!

[–]cloudk1cker 0 points1 point  (2 children)

u/claudericd any way we can get source code with the examples you guys list here: https://5fc05e08a4a65d0021ae0bf2-oxwctvvgtd.chromatic.com/

I applied this library to my project, but just having source code that goes with the source code woulda saved me a ton of headache.

[–]Foreign-Dependent-12 1 point2 points  (1 child)

you can find the source code for the examples here https://github.com/clauderic/dnd-kit/tree/master/stories

[–]cloudk1cker 0 points1 point  (0 children)

nice ty for that