clauderic / dnd-kit

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

cross/multi container dnd using useSortable with a single context #1391

Open FalconiZzare opened 2 months ago

FalconiZzare commented 2 months ago

๐Ÿ› Need Help With Setting Up Cross/Multi Container DnD

๐Ÿ“ Description Of The Issue

I'm using DnDContext, 1 SortableContext inside the main container where Category Containers can be Dragged and Dropped and category containers have SortableContext inside each of them to drag and drop subcategories. All of these using a single DnDContext. Now I want to move subcategories cross-container, basically I want to achieve multi container drag and drop for the subcategories. That's where the issue begins, broken drag and drop animations/visuals. I can't set it up properly. If anyone can help me set it up properly, at least the drag and drop visuals/animations where it doesn't break down while moving cateogory containers around and moving one subcategory to another category container. I prefer the constants the way they are structred. Will be beneficial for me.

๐Ÿ‘€ Visual Preview Of The Issue

https://github.com/clauderic/dnd-kit/assets/65172465/17d53f10-8cda-448d-8171-208c8871b455

๐Ÿ”—Link to repositories

GitHub: Link

GitHub Pages: Link

โš™๏ธ My Environment

Package Version
node v21.7.1
react v18.2.0
@dnd-kit/core v6.1.0
@dnd-kit/modifiers v7.0.0
@dnd-kit/sortable v8.0.0
@dnd-kit/utilities v3.2.2