Handling DropIndicator in Nested Structures

[louisneal]

I don't know how to handle the DropIndicator, it always activates the ancestor node in a nested structure. I have looked at the TreeItem example on the website, but I found that it is a flat structure, not a nested structure, and I couldn't get any inspiration from it. Brother, I need your help, thank you sincerely ~ Louis Here is the example I am creating: https://stackblitz.com/edit/rule-builder-dnd?file=src%2FRuleBuilder.tsx

[alexreardon]

Pragmatic drag and drop is a low level library that allows you to set up drop targets for any configuration of DOM elements you like. How you respond to events, and what drop indication you provide, is totally up to you.

In your example you are always rendering a drop indicator for a drop target, regardless of whether it is the inner most one or not. I suspect you will want to know whether a drop target is the inner most drop target, and only render a line on it if it is.

 onDrag: ({ self, location }) => {
          if (location.current.dropTargets[0].element === element) {
            setClosestEdge(extractClosestEdge(self.data));
          } else {
            setClosestEdge(null);
          }
        },

You can make whatever logic you want. For example, parents could display differently if children are being dragged over vs not dragged over

[louisneal]

@alexreardon Thank you for solving the problem that has been bothering me for several days. You are the best!

[sami616]

This helped me out, thanks all!