React DnD sort nested list

Question

I'm trying to create a nested drag-and-drop UI experience for my app but I can't get it to work without a lot of bugs.

On drag, it calls the function onHover and there I try to figure out where to move the dragged element to, but currently, it's buggy and does not work correctly.

First, I remove the dragged element from the state then I try to place it in the correct spot while dragging it around. And when you let go it should stay where you placed it. The basic idea is that you should freely rearrange items and nest them as you see fit.

I have made a CodeSandbox demo

I'm using the React DnD library.

My data structure is:

   const demoData = [
// ...
      {
        id: 1,
        type: "ROW",
        children: []
      },
      {
        id: 2,
        type: "ITEM",
        children: []
      },
      {
        id: 3,
        type: "ROW",
        children: [
          {
            id: 4,
            type: "COLUMN",
            children: [{ id: 5, type: "ITEM" }]
          },
          {
            id: 6,
            type: "COLUMN",
            children: [
              { id: 7, type: "ITEM" },
              { id: 8, type: "ITEM" }
            ]
          }
        ]
      }
// ...
    ];

Answer 1

Check out This Codesandbox project it will probably help. The bug seems to be coming from line 61. If you comment it out you'll see the items dont move but it stops the crazy bugs. You need to modify your move function or adapt a different method for dropping items.