search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
13.13k stars 651 forks source link

Move from a vertical sortable to an horizontal #851

Open sneridagh opened 2 years ago

sneridagh commented 2 years ago

I am wondering if it's possible to move from a SortableContext using vertical strategy to one that has horizontal. It seems that the element refuses to move and cancels the drag when you move it on the other type of sortable.

clauderic commented 2 years ago

Could you provide a CodeSandbox replicating the issue you are facing?

sneridagh commented 2 years ago

I managed to make this work:

https://codesandbox.io/s/dnd-kit-multi-containers-forked-t6hsmc?file=/src/container2.js

It's almost what I need, but wondering if the animation (going from a vertical to a horizontal list) could be improved.

A bit of context: I'm maintainer and Release Manager of Volto (https://github.com/plone/volto): the UI of the Plone open source CMS: https://plone.org

We are building a complex block engine (maybe you are already familiar with WP Gutenberg), we've been using beautiful-dnd but we wanted to move to dnd-kit. We want to cover the use case in where we have nested blocks (like a row block, that can contain blocks but in an horizontal fashion) and you are able to move from the main list of blocks to one nested (and horizontal). Trying now to get a PoC working, then try it with the real thing.

If you are curious about what we are doing:

row block (grid): https://www.youtube.com/watch?v=GiqvdvKBN34 here you can get a grasp on how the engine works: https://www.youtube.com/watch?v=qpWQGtCbiwk

My only concern was if it was possible, I guess it is, but I still haven't been able to make a decent PoC that exactly has the same functionality that we need. I am trying also to decipher the story in the main repo (the one with multiple containers) that works like a charm (although do not model exactly what I'm trying to achieve). I guess I have to get a better grasp on draggables overlays and collision detection algorithms...

Thanks for your time, and btw great work!