ant-design Tree组件添加虚拟滚动后,再开启拖拽,拖拽到盒子底部滚动条无法向下滚动

vmpqdwk3  于 3个月前  发布在  其他
关注(0)|答案(3)|浏览(69)

Steps to reproduce

Tree组件添加虚拟滚动后,再开启拖拽,拖拽到盒子底部滚动条无法向下滚动

What is expected?

\修复

What is actually happening?

Tree组件添加虚拟滚动后,再开启拖拽,拖拽到盒子底部滚动条无法向下滚动
| Environment | Info |
| ------------ | ------------ |
| antd | 5.15.0 |
| React | 18 |
| System | mac |
| Browser | 122.0.6261.94(正式版本) (x86_64) |

pb3s4cty

pb3s4cty1#

I'm facing the same problem with virtualized drag and drop table

ylamdve6

ylamdve62#

复现的 codesandbox 公开一下

mfuanj7w

mfuanj7w3#

复现的 codesandbox 公开一下

import { createRoot } from "react-dom/client";
import React, { useState } from "react";
import { Tree } from "antd";
import "antd/dist/reset.css";

const dig = (path = "0", level = 3) => {
const list = [];
for (let i = 0; i < 10; i += 1) {
const key = ${path}-${i} ;
const treeNode = {
title: key,
key,
};
if (level > 0) {
treeNode.children = dig(key, level - 1);
}
list.push(treeNode);
}
return list;
};
const treeData = dig();
const App = () => {
const [gData, setGData] = useState(treeData);
const [expandedKeys] = useState(["0-0", "0-0-0", "0-0-0-0"]);
const onDragEnter = (info) => {
console.log(info);
// expandedKeys, set it when controlled is needed
// setExpandedKeys(info.expandedKeys)
};
const onDrop = (info) => {
console.log(info);
const dropKey = info.node.key;
const dragKey = info.dragNode.key;
const dropPos = info.node.pos.split("-");
const dropPosition =
info.dropPosition - Number(dropPos[dropPos.length - 1]); // the

const loop = (data, key, callback) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].key === key) {
      return callback(data[i], i, data);
    }
    if (data[i].children) {
      loop(data[i].children, key, callback);
    }
  }
};
const data = [...gData];

// Find dragObject
let dragObj;
loop(data, dragKey, (item, index, arr) => {
  arr.splice(index, 1);
  dragObj = item;
});
if (!info.dropToGap) {
  // Drop on the content
  loop(data, dropKey, (item) => {
    item.children = item.children || [];
    // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
    item.children.unshift(dragObj);
  });
} else {
  let ar = [];
  let i;
  loop(data, dropKey, (_item, index, arr) => {
    ar = arr;
    i = index;
  });
  if (dropPosition === -1) {
    // Drop on the top of the drop node
    ar.splice(i, 0, dragObj);
  } else {
    // Drop on the bottom of the drop node
    ar.splice(i + 1, 0, dragObj);
  }
}
setGData(data);

};
return (

);
};

const root = createRoot(document.getElementById("root"));
root.render();

相关问题