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

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

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

  1. const loop = (data, key, callback) => {
  2. for (let i = 0; i < data.length; i++) {
  3. if (data[i].key === key) {
  4. return callback(data[i], i, data);
  5. }
  6. if (data[i].children) {
  7. loop(data[i].children, key, callback);
  8. }
  9. }
  10. };
  11. const data = [...gData];
  12. // Find dragObject
  13. let dragObj;
  14. loop(data, dragKey, (item, index, arr) => {
  15. arr.splice(index, 1);
  16. dragObj = item;
  17. });
  18. if (!info.dropToGap) {
  19. // Drop on the content
  20. loop(data, dropKey, (item) => {
  21. item.children = item.children || [];
  22. // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
  23. item.children.unshift(dragObj);
  24. });
  25. } else {
  26. let ar = [];
  27. let i;
  28. loop(data, dropKey, (_item, index, arr) => {
  29. ar = arr;
  30. i = index;
  31. });
  32. if (dropPosition === -1) {
  33. // Drop on the top of the drop node
  34. ar.splice(i, 0, dragObj);
  35. } else {
  36. // Drop on the bottom of the drop node
  37. ar.splice(i + 1, 0, dragObj);
  38. }
  39. }
  40. setGData(data);

};
return (

);
};

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

展开查看全部

相关问题