onMove receives inconsistent parentId and index

[davidnaas]

Inconsistent index
Cursor would imply new index should be 1 but is reported as 2

Inconsistent parentId
Cursor and node.willReceiveDrop indicates that a drop will NOT happen, yet parentId is that of the Box rather than Container

This behaviour only happens after first moving Slider into a Box, then out again. Somehow that Slider continues to receive the Box as the parent when being moved. It should also be noted that those boxes are internal nodes in all cases, i.e. children is always an array

[RAFA3L]

Same here, moving a node from a nested node to another one get an incorrect index, then if you move the node inside the same level the index is correct.

[surajair]

Yes. Same here. onMove is giving incorrect position. at root level, if there are two nodes, it am getting position as 2 whereas it should have been 1.

[RAFA3L]

Possible solution? instead of get the index from the args in onMove, yo can get the proper one from the tree state like this, where tree is the ref to the component.

tree.state.dnd.index;

[RAFA3L]

I discovered that the problem in my case is when the node next position is above the old one, even to another level but always dragging it upward, then the index jump one step more.

[surajair]

Possible solution? instead of get the index from the args in onMove, yo can get the proper one from the tree state like this, where tree is the ref to the component.

tree.state.dnd.index;

Will try this

[RAFA3L]

@surajair the index in the state has the same problem, dragging the node upward the index is increased by 1, you can calculate the direction getting the old rowIndex of the node from the tree instance

[furkanalptokac]

Same here. When I drag a node above or below itself, index value changes. According to the example, index is 0 on above but index is 1 on below. It moves under next element when index is 1 with a simple dnd logic. That case is completely blocking me.

[jameskerr]

I may need to see more of your code to uncover the issue. I do see that when you drag the first child node "under itself" the index is 1.

This might be a bug, might not. You may need to change your "onMove" implementation. Here is how I have written my onMove function in the past.

  const onMove = (args: {
    dragIds: string[];
    parentId: null | string;
    index: number;
  }) => {
    for (const id of args.dragIds) {
      tree.move({ id, parentId: args.parentId, index: args.index });
    }
    setData(tree.data);
  };

And here is the tree.move function.

  move(args: { id: string; parentId: string | null; index: number }) {
    const src = this.find(args.id);
    const parent = args.parentId ? this.find(args.parentId) : this.root;
    if (!src || !parent) return;
    parent.addChild(src.data, args.index);
    src.drop();
  }

And here is the addChild function.

  addChild(data: T, index: number) {
    const node = createNode(data, this);
    this.children = this.children ?? [];
    this.children.splice(index, 0, node);
    this.data.children = this.data.children ?? [];
    this.data.children.splice(index, 0, data);
  }

And here is the drop function.

  drop() {
    if (this.hasParent()) this.parent.removeChild(this.childIndex);
  }

All this code is here in the repo

react-arborist/modules/react-arborist/src/hooks/use-simple-tree.ts

Line 28 in aba9953

const onMove: MoveHandler<T> = (args: {

The algorithm works like this....

[jameskerr]

@davidnaas What if you move your cursor further left before dropping?