HTML 5 Native Drag and Drop

[phungleson]

Hi,

I read the README and it mentioned that dnd-kit doesn't implement HTML 5 Native Drag and Drop.

I wonder what the are the reasons behind not implementing it? is it possible to support it and what do we need to do if we want to have it?

Best regards,
Son.

[clauderic]

@dnd-kit is intentionally not built on the HTML5 Drag and Drop API because it has severe limitations.

It does not support touch devices or using the keyboard to drag items, which means that the libraries that are built on top of it need to expose an entirely different implementation to support those input methods.

This typically increases the complexity of the codebase and the overall bundle size of the library, and leads to inconsistencies between the mouse, touch and keyboard layers because they're powered by entirely different implementations.

The HTML5 Drag and Drop API is also limiting; it doesn't support common use-cases such as locking dragging to a specific axis or to the bounds of a container, custom collision detection strategies, or even customizing the preview of the dragged item.

The main tradeoff with not using the HTML5 Drag and drop API is that you won't be able to drag from the desktop or between windows. If the drag and drop use-case you have in mind involves this kind of functionality, you'll definitely want to use a library that's built on top of the HTML 5 Drag and drop API.

[pjeby]

Wouldn't it be possible for someone to write a Sensor type for it? Or is the architecture such that it's precluded from being a possibility? Collision detection would be somewhat limited as you don't know the size or shape of something dragged in from outside, but you still can get co-ordinates to use e.g. corner distance on. ISTM that if a sensor could trigger a drag from a simulated drag source to represent data dragged in from outside, and also support starting drags of HTML5 draggables, then it should be able to integrate with the rest of the system, no?

As for previews, nothing prevents either selecting a specific element to create a drag image for the HTML5 API, but you could also set an empty one and track the mouse with a preview. (It just requires the overall app or window to have an event listener to be able to follow the mouse movements via drag events vs. standard mouse events.) That dnd-kit already supports "off screen" dragging just means that the preview would disappear when the drag leaves the window, leaving behind just the OS drag cursor, at least until it hits another window.

These are not arguments to convince you to support the API, but I'm wondering if the architecture would support a third-party sensor using those events (with the appropriate sanitizing, of course).

For background, my own use case is related to the Obsidian Kanban Plugin, which is currently using react-beautiful-dnd, but finding it not so beautiful to code with. I wrote a small HTML5 DnD extension for it to allow dropping HTML and links from other apps onto Kanban boards, but only in a specialized dropzone because there's not really a way to integrate the events into rbdnd's model to get the dragover animations. (Or at least not one that I could find.)

React-DND, despite being based on the HTML5 API, isn't really designed to allow you to work with arbitrary data across app boundaries either, restricting you to a small set of native types (text, file, or URL). But it would be nice for the Kanban plugin to support dragging cards between Obsidian vaults in different windows. (And the plugin is desktop only, in an Electron app, so it's basically only one browser I'd have to support.)

So, if writing a custom sensor would allow using dnd-kit's API and animations, that could be a big win for the Kanban plugin, as it could easily support e.g. dropping content from other apps into a specific position in a list instead of always at the end, allow dragging cards into other apps, and so on.

On the other hand, I wouldn't want to try writing a sensor if it's something that definitely won't work, or that you'd be opposed to allowing integration with.