Best architecture for draggables nested in sortables

[johnatzark]

Hi,

I have a situation where I have a list of items inside a vertical sortable.
These represent the specific order I want my parent Widgets in.

And within those individual sortable Widgets, I have a collection of items which I want to be able to drag and drop between the sortable Widgets.

So I can both arrange the order in which the parent level Widgets appear but also move the individual pill based items between the parent widgets.

I always seem to get half way there, but the combination of droppables within sortables seems to not be optimal and event propagation goes crazy.

Could you recommend a best practice architecture for this with the raw components in the kit?
I am unable to use the Stories

My Present config is:

<DndContext>
    <SortableContext>
         <MySortableItem>
             <DndContext>
                 <div useDroppable>
                     <MyItem useSortable>
                     <div>
                         <ul>
                             <button useDraggable>
                                 <li></li>
                             </button>
                             <button useDraggable>
                                 <li></li>
                             </button>
                         </ul>
                     </div>
                     </MyItem>
                     <MyItem useSortable>
                     <div>
                         <ul>
                             <button useDraggable>
                                 <li></li>
                             </button>
                             <button useDraggable>
                                 <li></li>
                             </button>
                         </ul>
                     </div>
                     </MyItem>
                 </div>
             </DndContext>
         </MySortableItem>
    </SortableContext>
</DndContext>