What use is there to nesting DndContext if events don't go higher than the first parent?

[ABouchard55]

Hello there,
in my current situation, I have 2 containers:

• Container 1 is a Sortable List that doesn't need a DragOverlay and will receive data from container 2. It should also be restricted to the vertical axis.
• Container 2 is a list of Draggables that need a DragOverlay and will add rows to Container 1. There is no axis restriction.

So from this situation, I would need a stucture like this:

<DndContext> // Context 1
    <DndContext> // Context 2
       <SortableContext>
            <SortableItems />
        </SortableContext>
    </DndContext>
    <DndContext> // Context 3
        <DraggableItems />
        <DragOverlay />
    </DndContext>
</DndContext>

But what good is this if all my events (onDragStart, onDragEnd) are stopped at Context 3 and will never reach Context 1 or 2 ? If I want events to be shared, I have to remove the second and third context ? But now I can't have different modifiers on the DndContexts and I can't have a DragOverlay on only one of the containers.

Or am I missing something ?

Thanks

[clauderic]

Currently, the best way to do this is to have a single <DndContext> provider. You can dynamically change what modifiers are active or what the DragOverlay renders based on the type of active element.

You can also use useDndMonitor() to manage state locally rather than having to manage state at the top level of your application where <DndContext> is rendered.

You can leverage the data property of useDraggable and useSortable to store modifiers that should be applied when that type of draggable item is active, and also pass a component that should be rendered for the DragOverlay.

 function DraggableItem() {
  const {...} = useDraggable({
    id,
    data: {
      modifiers: [restrictToVerticalAxis],
      renderDragOverlay: ({active}) => <Item id={active.id} />,
    },
  });
}

function App() {
  const [active, setActive] = useState(null);

  return (
    <DndContext
      modifiers={active ? active.data.current.modifiers : []}
      onDragStart={({active}) => {
        setActive(active);
      }}
      onDragEnd={() => setActive(null)}
    >
      <DragOverlay>
        {active?.data.current?.renderDragOverlay?.(active)}
      </DragOverlay>

In the future, there will likely be new APIs introduced to facilitate configuring <DndContext> and rendering different types of <DragOverlay> children. However, I don't foresee it being possible to communicate across <DndContext> boundaries any time soon.

[ABouchard55]

That's what I ended up doing for my modifiers and my drag overlay, but I didn't realize that useDndMonitor gave me access to the event inside a child component, that's gonna be very useful. Thanks a lot for your answer !

[NiazMorshed2007]

Is there any other way now to communicate across DndContext?
Or this solution here is the way to go?

[jamesgour]

Same question from my side, what is the best practice in 2024? :)

[catsofmath]

I had a very similar issue with this setup

  <DndContext> // Context 1
      <DraggableItems />
       <DragOverlay /> // For Context 1
    
    <WrapperComponent>
      <DndContext> // Context 2
          <DraggableItems /> // For Context 2
          <DroppableItems /> // For context 1
      </DndContext>
    </WrapperComponent>
</DndContext>

And all my <DragOverlay /> events onto <DroppableItems /> would be consumed by <DndContext /> // For Context 2 when I need it consumed by Context 1

So my hack around it was to isDraggingFromParentContext and drill it to the <WrapperComponent> and then conditionally render <DndContext> // Context 2 only when isDraggingFromParentContext was false

I leave it to the reader to fill in the rest (because I can't paste code from work)

[Tommuh]

I followed @clauderic advice. However, it is not possible for me to set the logic via the dragger. I have several data/functions not reachable at the dragger. I also tried @stomachfat solution but this gave unwanted re-renders with me.

My solution works with one parent provider. The draggables and droppables have a ‘context/grouping’. So that a draggable can only be placed on droppables with the same context. When this does not match, the droppable is ‘disabled’.

So because you are working with a ‘context/grouping’, you can also have multiple ‘DragOverLay’ in your application if you want.

I push a profile using ‘useContext’ to the provider. The profile contains the options like ‘onDragStart’, ‘onDragEnd’ and ‘collisionDetection’ and so on. When you register the functions with ‘useDndMonitor’, they are all executed when active. This did not give the desired result with me.

Code says more than 1000 words so below is how I did it ... have fun with it!

Provider

const DragdropContext = createContext();

const DragDropProvider = props => {
    const [context, setContext] = useState(null);
    const [profiles, setProfile] = useState({});
                 
    const handleDragStart = event => {        
        const contexxt = event.active.data.current.context;        
        setContext(contexxt);
        
        if(Object.hasOwn(profiles, contexxt) 
            && Object.hasOwn(profiles[contexxt], 'handleDragStart')) {
        
            profiles[contexxt].handleDragStart(event);            
        }
    };

    const handleDragEnd = event => {          
        const contexxt = event.active.data.current.context;
        setContext(null);
                                
        if(Object.hasOwn(profiles, contexxt) 
            && Object.hasOwn(profiles[contexxt], 'handleDragEnd')) {
        
            profiles[contexxt].handleDragEnd(event);            
        }        
    };    
    
    let collisionDetection,
        modifiers = []; 
    
    if(Object.hasOwn(profiles, context)) {
        if(Object.hasOwn(profiles[context], 'collisionDetection')) {
            collisionDetection = profiles[context].collisionDetection;
        }
        
        if(Object.hasOwn(profiles[context], 'modifiers')) {
            modifiers = profiles[context].modifiers;
        }            
    }
        
    return (
        <DragdropContext.Provider value={[context, setProfile]}>
            <DndContext onDragStart={handleDragStart}
                        onDragEnd={handleDragEnd}
                        modifiers={modifiers}
                        collisionDetection={collisionDetection}>  
                        
                {props.children}                              
            </DndContext>                    
        </DragdropContext.Provider>
    );  
};

export default DragDropProvider;
       
export {
    DragdropContext
};

Droppable

const Droppable = props => {
    const [context] = useContext(DragdropContext);
        
    const { setNodeRef } = useDroppable({
        id: 'droppable',
        disabled: context !== 'BLOCK'
    });
    
    return (
        <div ref={setNodeRef}>
            {props.children}
        </div>
    );
};

export default Droppable;

Dragger

const { attributes, listeners, setNodeRef } = useDraggable({
    id: 'draggable',
    data: {
        context: 'BLOCK'
    }
});

Somewhere in your code where drag and drop starts. For me, this is the same place where I have my ‘DragOverlay’.

const Blocks = props => {
    const [context, setProfile] = useContext(DragdropContext);
    const { active } = useDndContext();
        
    useEffect(() => {
        setProfile(profiles => ({
            ...profiles,
            BLOCK: {
                handleDragStart: event => {
                    console.log(event);
                },
                
                handleDragEnd: event => {
                    console.log(event);
                },

                collisionDetection: someCollisionLogic,                
                modifiers: [someModifierLogic]                     
            }
        }));
    }, []);    
             
    return (
          <DragOverlay>
	          {(context === 'BLOCK && active?.id) ? <Component /> : null}
          </DragOverlay>                
    );
};

export default Blocks;