0

I am trying to create a multiple containers drag and drop function in a second layer modal. The result is quite weird. I can move the items to other containers, but I have to double click the same item to make it move. I don't know where I'm going wrong and how to solve it.

This handleDragOver function is the part of my code that might cause the problem.

function handleDragOver(event) {
    console.log("start drag over");
    const { active, over } = event;
    const { id } = active;
    const { id: overId } = over;
    console.log("active", id);
    console.log("over", overId);
    // Find the containers
    var activeContainer;
    var overContainer;
    findContainer(id)
      .then(async (data) => {
        activeContainer = await data;
        await findContainer(overId).then(async (d) => {
          overContainer = await d;
        });
      })
      .then(() => {
        console.log("activeContainer", activeContainer);
        console.log("overContainer", overContainer);
        if (
          !activeContainer ||
          !overContainer ||
          activeContainer === overContainer
        ) {
          return;
        }

        setGroupItems((prev) => {
          const activeItems = prev[activeContainer];
          const overItems = prev[overContainer];
          const activeIndex = activeItems.findIndex((i) => i.id === id);
          const overIndex = overItems.findIndex((i) => i.id === overId);
          console.log("aIndex", activeIndex);
          console.log("oIndex", overIndex);
          let newIndex;
          newIndex = overIndex >= 0 ? overIndex + 1 : overItems.length + 1;
          return {
            ...prev,
            [activeContainer]: [
              ...prev[activeContainer].filter((item) => item.id !== active.id)
            ],
            [overContainer]: [
              ...prev[overContainer].slice(0, newIndex),
              groupItems[activeContainer][activeIndex],
              ...prev[overContainer].slice(newIndex, prev[overContainer].length)
            ]
          };
        });
      });
  }

But I am not really sure so I put my sample project in the CodeSandBox down below.

This is my code in the CodeSandbox Link

Anyone gives me a direction I would be very appreciated.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Jenny Huoh
  • 13
  • 4
  • CodeSandBox is not working – Werthis Apr 05 '23 at 11:35
  • Hello @Werthis, thanks for your response!! I just open the link and it is available. Sorry I didn't mention that this is a two-layer modal example. I will edit in the main article. – Jenny Huoh Apr 11 '23 at 14:27

0 Answers0