tree icon indicating copy to clipboard operation
tree copied to clipboard

onDrop's arguments dropPosition not equal allowDrop's arguments dropPosition

Open tsaowe opened this issue 2 years ago • 2 comments

import RcTree from "rc-tree";
import "rc-tree/assets/index.css";

const treeData = [
  {
    title: "title0",
    key: "key0"
  },
  {
    title: "title1",
    key: "key1"
  },
  {
    title: "title2",
    key: "key2"
  },
  {
    title: "title3",
    key: "key3"
  },
  {
    title: "title4",
    key: "key4"
  },
  {
    title: "title5",
    key: "key5",
    children: [
      {
        title: "title4-0",
        key: "key4-0"
      },
      {
        title: "title4-1",
        key: "key4-1"
      },
      {
        title: "title4-2",
        key: "key4-2"
      },
      {
        title: "title4-3",
        key: "key4-3"
      }
    ]
  },
  {
    title: "title6",
    key: "key6"
  }
];

export default function App() {
  return (
    <RcTree
      allowDrop={(params) => {
        if (Math.random() > 0.99) {
          console.log("allow drop:", params);
        }
        return true;
      }}
      onDrop={(params) => {
        console.log("on Drop:", params);
      }}
      draggable
      defaultExpandAll
      treeData={treeData}
    />
  );
}

quick codesandbox

try to drag title4-3 as first child(before title4-0), and see console

tsaowe avatar Oct 31 '22 01:10 tsaowe

I had the same problem. When I want to set the allowDrop rule - only the nodes of the same level can be sorted up and down, because this problem can never be achieved

QiaoLi1996 avatar Nov 11 '22 11:11 QiaoLi1996

I think part of the problem is there is a horizontal mouse position component to the drop position. When dropping on the first element in the list, leftish drops gives a drop position of 1, rightish gives a drop position of 0, also correlating to drop to gap true/false.

image

..edit:: Oh looking more at this.. allowrdop dropPosition is only ever 1, 0, -1 I think it's intent is to inform the position in relation to the two nodes. The dragNode and the dropNode. The dragNode is either before or after the dropNode.

The way I have handled only allowing nodes of the same level to be sorted is to set a parentKey on each item, then checking that the dropNode key is equal to the parentNodeKey of the drag node. You could also search the children array of the dropNode to see if the dragNode key exists in that array.

zkinsk avatar Nov 23 '22 15:11 zkinsk