Skip to content

dropPosition is calculated incorrectly when dragging within the same parent #97

@Buskervil

Description

@Buskervil

When using Tree with draggable enabled, the dropPosition property in the onDrop event returns an incorrect index if an element is dragged downward within the same parent.

Steps to Reproduce:

Create a tree with nested nodes.

Enable draggable and handle onDrop.

Drag a node downward inside the same parent (without changing nesting level).

Check event.dropPosition – it will be +1 higher than the actual index.

Expected Behavior:
dropPosition should accurately reflect the drop position.

Current Behavior:
If a node is dragged after another node within the same parent, dropPosition is incremented by 1 (e.g., returns 2 instead of the actual index 1).

Additional Context:

The event.node.children property is sometimes missing, making manual position calculation harder.

Observed in antd@5.24.8, but might affect other versions.
import React, { useState } from 'react';
import { Tree } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';

const initialData: TreeDataNode[] = [
  {
    title: 'Parent',
    key: '0',
    children: [
      { title: 'Child 1', key: '0-0' },
      { title: 'Child 2', key: '0-1' },
      { title: 'Child 3', key: '0-2' },
    ],
  },
];

const App: React.FC = () => {
  const [gData, setGData] = useState(initialData);

  const onDrop: TreeProps['onDrop'] = (info) => {
    console.log('Actual drop position:', info.dropPosition); // Will be 1 greater than the actual position when moving downward
  };

  return (
    <Tree
      draggable
      blockNode
      onDrop={onDrop}
      treeData={gData}
    />
  );
};

export default App;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions