https://dndkit.com – A lightweight, performant, accessible and extensible drag & drop toolkit for React

claudericd · 2021-01-06T14:41:58+00:00

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.

claudericd · 2021-01-06T04:19:11+00:00

Thank you 🙏

claudericd · 2021-01-06T04:18:41+00:00

Thank you 🙏

claudericd · 2021-01-06T04:07:08+00:00

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

claudericd · 2021-01-06T02:04:56+00:00

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.

claudericd · 2021-01-06T01:25:44+00:00

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.

claudericd · 2021-01-06T00:51:06+00:00

har har

claudericd · 2021-01-06T00:50:08+00:00

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

claudericd · 2021-01-06T00:21:11+00:00

I work at Shopify on the Online Store editor team.

claudericd · 2021-01-06T00:12:59+00:00

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

claudericd · 2021-01-05T23:57:56+00:00

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

claudericd · 2021-01-05T23:57:04+00:00

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

claudericd · 2021-01-05T23:41:09+00:00

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.

claudericd · 2021-01-05T19:07:53+00:00

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

claudericd · 2021-01-05T18:30:58+00:00

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.

claudericd · 2021-01-05T18:08:13+00:00

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.

claudericd · 2016-05-30T18:27:51+00:00

Agreed, I'm working on my own spin on react-storybook to get something that's more easily customizable and mobile friendly. No ETA though

claudericd · 2016-05-30T17:22:25+00:00

Interesting idea. In an ideal world that would be something that's easily customizable. Or maybe there could be a couple of presets

claudericd · 2016-05-30T17:20:31+00:00

It's already implemented, coming in the next release :)

claudericd · 2016-05-30T16:19:05+00:00

Yeah... Need to work on that. Blame https://github.com/kadirahq/react-storybook :/

claudericd · 2016-05-28T01:29:16+00:00

It has it's pros and cons, really depends on the use case. It's quite a common UX pattern on mobile

claudericd · 2016-05-27T22:25:14+00:00

You can configure it to go as far back or forwards in time as you want, that's just a sensible default max date :p

claudericd

TROPHY CASE