Nested Multiple Conainer List

[MuhammadHamzaChippa]

I am trying to Create the Nested Multiple List, in which we can move items and subitems in different container, I have created it using react beautiful dnd but I am having hard time how to do it in the dnd-kit. @clauderic it will be very helpful if you give me the push how to implement it using dnd kit.

I am trying to do something like this but the dragging behavior of parent SortableContext is very weird as you can see in the second video

const NestedList = () => {
    const [activeItem, setActiveItem] = useState();
    const [items, setItems] = useState({
        A: [
            {
                id: "1",
                text: "A1",
                blocks: [
                    { id: "11", text: "1 - subtextA1" },
                    { id: "12", text: "2 - subtextA1" },
                    { id: "13", text: "3 - subtextA1" },
                ],
            },
            {
                id: "2",
                text: "A2",
                blocks: [
                    { id: "14", text: "1 - subtextA2" },
                    { id: "15", text: "2 - subtextA2" },
                    { id: "16", text: "3 - subtextA2" },
                ],
            },
            {
                id: "3",
                text: "A3",
                blocks: [
                    { id: "17", text: "1 - subtextA3" },
                    { id: "18", text: "2 - subtextA3" },
                    { id: "19", text: "3 - subtextA3" },
                ],
            },
        ],
        B: [
            {
                id: "6",
                text: "B1",
                blocks: [
                    { id: "19", text: "1 - subtextB1" },
                    { id: "20", text: "2 - subtextB1" },
                    { id: "21", text: "3 - subtextB1" },
                ],
            },
            {
                id: "7",
                text: "B2",
                blocks: [
                    { id: "22", text: "1 - subtextB2" },
                    { id: "23", text: "2 - subtextB2" },
                    { id: "24", text: "3 - subtextB2" },
                ],
            },
            {
                id: "8",
                text: "B3",
                blocks: [
                    { id: "25", text: "1 - subtextB3" },
                    { id: "26", text: "2 - subtextB3" },
                    { id: "27", text: "3 - subtextB3" },
                ],
            },
        ],
    });

    const sensors = useSensors(
        useSensor(PointerSensor),
        useSensor(TouchSensor, {}),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates,
        })
    );



    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragOver={handleDragOver}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
            onDragCancel={handleDragCancel}
        >
            <div
                style={{
                    display: "inline-grid",
                    boxSizing: "border-box",
                    padding: 20,
                    gridAutoFlow: "column",
                    width: "100%",
                }}
            >
                {Object.keys(items).map((container) => {
                    return (
                        <div className="bg-[grey] text-center">
                            <h1 className="mt-[10px] text-[24px]">{container}</h1>
                            <DroppableContainer container={container}>
                                <SortableContext
                                    items={items[container].map((item) => item.id)}
                                    strategy={verticalListSortingStrategy}
                                >
                                    {items[container].map((item) => {
                                        return (
                                            <Item item={item} key={item.id}>
                                                <SortableContext
                                                    items={item.blocks.map((block) => block.id)}
                                                    strategy={verticalListSortingStrategy}
                                                >
                                                    {item.blocks.map((block) => {
                                                        return <Block block={block} key={block.id} />;
                                                    })}
                                                </SortableContext>
                                            </Item>
                                        );
                                    })}
                                </SortableContext>
                            </DroppableContainer>
                        </div>
                    );
                })}
            </div>
        </DndContext>
    );
};

const DroppableContainer = ({ container, children }) => {
    const { setNodeRef } = useDroppable({ id: container });
    return (
        <div ref={setNodeRef} className="bg-[green] grid grid-rows-4 gap-2 p-[20px] m-[10px] ">
            {children}
        </div>
    );
};
const Item = ({ item , children }) => {
    const { setNodeRef, attributes, listeners, transition, transform, isDragging } = useSortable({ id: item.id });
    const style = {
        transition,
        transform: CSS.Transform.toString(transform),

    }
    const styles = {
        container: `${isDragging ? "opacity-[0.5]" : "opacity-1"} bg-[lightgreen] text-center my-2 p-2`,
    };
    return (
        <div
        ref={setNodeRef}
        {...attributes}
        {...listeners}
        style={style}
        className={styles.container}
    >
        {item.text}
        {children}
    </div>
    );
};



const Block = ({ block }) => {
    const { setNodeRef, attributes, listeners, transition, transform, isDragging } = useSortable({ id: block.id });
    const style = {
        transition,
        transform: CSS.Transform.toString(transform),
    };
    const styles = {
        container: `${isDragging ? "opacity-[0.5]" : "opacity-1"} bg-[lightblue] text-center my-2 p-2`,
    };
    return (
        <div ref={setNodeRef} {...attributes} {...listeners} style={style} className={styles.container}>
            {block.text}
        </div>
    );
};

Nested.List.mp4

nested.list.mp4

[MuhammadHamzaChippa]

[porkopek]

So you solved your problems? Seems to work to me

[JamieKidman]

Really good demo @MuhammadHamzaChippa you able to add that the guide or how to

[JamieKidman]

The codesandbox didnt work, i had to download it

[Ali762]

I have created a Nested Multiple Container in which I am differentiating the logic of OnDragStart, onDragOver and onDragEnd on the basis of type of draggable.If it is helpful for anyone to implement the same logic, have a look at the codesandbox https://codesandbox.io/s/exciting-glitter-2uziss

This is amazing - Thank you. Theres a bug when you try to drag an item into an empty container though.

[Au613]

Here are fixed functions that avoid the bug when you drag an item into an empty container.
`
const handleDragOver = (result) => {
const {active, over} = result
const overId = over?.id
if ((overId == null || overId === undefined) || active.id in items) {
return
}
if (result.active.data.current.type === "card") {

		      // if the draggable type is card move the card to the new container
		      const overContainer = findContainer(overId)
		      const activeContainer = findContainer(active.id)
  
		      if (overContainer === undefined) console.log("no containers containers containers")
		      
		      if (!overContainer || !activeContainer) {
			      console.log("No container found")
			      return
		      }
		      
		      if (activeContainer !== overContainer) {
			      setItems((items) => {
				      const activeItems = items[activeContainer]
				      const overItems = items[overContainer]
				      
				      const overIndex = overItems.findIndex((item) => item.id === overId)
				      const activeIndex = activeItems.findIndex((item) => item.id === active.id)
				      
				      let newIndex
				      if (overId in items) {
					      newIndex = overItems.length + 1
				      } else {
					      const isBelowOverItem = over && active.rect.current.translated && active.rect.current.translated.top > over.rect.top + over.rect.height
					      
					      const modifier = isBelowOverItem ? 1 : 0
					      newIndex = overIndex > 0 ? overIndex + modifier : overItems.length + 1
				      }
				      
				      // recentlyMovedToNewContainer.current = true;
				      
				      return {
					      ...items,
					      [activeContainer]: items[activeContainer].filter((item) => item.id !== active.id),
					      [overContainer]: [...items[overContainer].slice(0, newIndex), items[activeContainer][activeIndex], ...items[overContainer].slice(newIndex, items[overContainer].length)],
				      }
			      })
		      }
	      } 
	      else if (result.active.data.current.type === "block") {
		      // if the draggable type is block move the block to the new card
		      const activeContainer = result.active.data.current.container
		      let overContainer = result.over.data.current.container
		      let overCard = findCard(overId) 
		      
		      if (overContainer === undefined && overCard === undefined) return
		      if (overCard === undefined) overCard = items[overContainer][0].id //in case the over container is empty
		      if (overContainer === undefined) overContainer = Object.keys(items).filter(el => (items[el][0].id === overCard))[0]
  
		      const activeCard = findCard(active.id)
		      
		      if (!overCard || !activeCard) {
			      console.log("No card found")
			      return
		      }
  
		      if (overContainer === undefined) return
		      //if card dragged to another container
		      if (overCard !== activeCard) {
			      const activeBlocks = cardsList[activeCard]
			      const overBlocks = cardsList[overCard]
  
			      const overIndex = overBlocks ? overBlocks.findIndex((item) => item.id === overId) : 0
			      const activeIndex = activeBlocks.findIndex((item) => item.id === active.id)
			      
			      let newIndex
			      if (overId in cardsList) {
				      newIndex = overBlocks.length + 1
			      } else {
				      const isBelowOverItem = over && active.rect.current.translated && active.rect.current.translated.top > over.rect.top + over.rect.height
				      
				      const modifier = isBelowOverItem ? 1 : 0
				      newIndex = overIndex > 0 ? overIndex + modifier : (overBlocks ? overBlocks.length : 0) + 1
			      }
			      
			      const newCardsList = {
				      ...cardsList,
				      [activeCard]: cardsList[activeCard].filter((item) => item.id !== active.id),
				      // Check if overCard exists before performing the slice operation
				      [overCard]: overCard && cardsList[overCard]
				        ? [
					        ...cardsList[overCard].slice(0, newIndex),
					        cardsList[activeCard][activeIndex],
					        ...cardsList[overCard].slice(newIndex, cardsList[overCard].length),
					      ]
				        : cardsList[activeCard][activeIndex], // If overCard doesn't exist, leave it as is
			        };
			      
			      const newItems = {...items}
			      const newActiveContainer = newItems[activeContainer].map((card) => {
				      if (card.id === activeCard) {
					      card.blocks = newCardsList[activeCard]
				      }
				      return card
			      })
			      const newOverContainer = newItems[overContainer]?.map((card) => {
				      if (card.id === overCard) {
					      card.blocks = newCardsList[overCard]
				      }
				      return card
			      })
			      newItems[activeContainer] = newActiveContainer
			      newItems[overContainer] = newOverContainer
			      setItems(newItems)
		      }
	      }
      }
  
      const handleDragEnd = (result) => {
	      const {active, over} = result
  
	      if (result.active.data.current.type === "card") {
		      const activeContainer = findContainer(active.id)
		      console.log(
			      items[activeContainer].find((el) => (el.id = result.active.id)),
			      "HELLO HELLO HELLO"
		      ) // existing log to see the full drag result
  
		      if (!activeContainer) {
			      setActiveItem(null)
			      return
		      }
  
		      const overId = over?.id
  
		      if (overId == null) {
			      setActiveItem(null)
			      return
		      }
  
		      const overContainer = findContainer(overId)
		      
		      console.log("over container: ", overContainer)
		      if (overContainer === undefined) {handleDragCancel(); return }
  
		      if (overContainer) {
			      // Log the container where the item was dropped
			      console.log(`Card dropped into container: ${overContainer}`)
  
			      // Find the card that was moved
  
			      const activeIndex = items[activeContainer].findIndex((item) => item.id === active.id)
			      const overIndex = items[overContainer].findIndex((item) => item.id === overId)
			      if (activeIndex !== overIndex) {
				      setItems((items) => ({
					      ...items,
					      [overContainer]: arrayMove(items[overContainer], activeIndex, overIndex),
				      }))
			      }
		      }
	      } 
	       if (result.active.data.current.type === "block") {
		      
		      const activeCard = findCard(active.id)
		      if (!activeCard) {
			      setActiveBlock(null)
			      return
		      }
		      const overId = over?.id
		      if (overId == null) {
			      setActiveBlock(null)
			      return
		      }
		      const overCard = findCard(overId)
		      let overContainer = result.over.data.current.container
		      if (overContainer === undefined && overCard) {
			      overContainer = Object.keys(items).filter(el => (items[el][0].id === overCard))[0]
		      }
		      // console.log(overCard, "card", overContainer, "container")
		      if (overContainer === undefined && overCard === undefined) return
		      // Log the container where the block is dropped
		      
		      // console.log(`block dropped into container: ${overContainer}`)
		      
		      if (overCard) {
			      const activeIndex = cardsList[activeCard].findIndex((item) => item.id === active.id)
			      let overIndex = cardsList[overCard].findIndex((item) => item.id === overId)
			      overIndex = (overIndex === 0) ? cardsList.length: overIndex
			      const newCardsList = {
				      ...cardsList,
				      [overCard]: arrayMove(cardsList[overCard], activeIndex, overIndex),
			      }
			      
			      const newItems = {...items}
			      
			      const newOverContainer = newItems[overContainer]?.map((card) => {
				      if (card.id === overCard) {
					      card.blocks = newCardsList[overCard]
				      }
				      return card
			      })
			      newItems[overContainer] = newOverContainer
			      // console.log(newItems["Chat"][0].blocks[5], "ITEMS")
			      setItems(newItems)
		      }
	      }
	      setActiveBlock(null)
	      setActiveItem(null)
}`

[MuhammadHamzaChippa]

Yes Sir, that's why I uploaded a working demo on codesandbox, might be helpful for people

…

On Thu, Jul 7, 2022, 3:56 PM Porkopek ***@***.***> wrote: So you solved your problems? Seems to work to me — Reply to this email directly, view it on GitHub <#821 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOYNVRRIUWEAUT3LQF4TXHDVS2ZV7ANCNFSM52VGX54A> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[porkopek]

Cool!