ant-design / ant-design/pro-components

🐛[BUG] DragSortTable 拖动表格,会导致下拉滚动条向下滚动无法停止的问题

Open
#8,583 10 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

https://pro-components.antdigital.dev/components/drag-sort-table#dragsorttable-demo-drag-sort-table
官方文档即可复现,DragSortTable 拖动行到表格以外会导致外部下拉滚动条向下或向上滚动无法停止的问题
![动画](https://github.com/user-attachments/assets/ead73757-86fb-4e31-8156-59665b7f1fae)
### 📷 复现步骤

### 🏞 期望结果

### 💻 复现代码
```TypeScript
import type { ProColumns } from '@ant-design/pro-components';
import { DragSortTable } from '@ant-design/pro-components';
import { message } from 'antd';
import { useState } from 'react';

const columns: ProColumns[] = [
{
title: '排序',
dataIndex: 'sort',
width: 60,
className: 'drag-visible',
},
{
title: '姓名',
dataIndex: 'name',
className: 'drag-visible',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '地址',
dataIndex: 'address',
},
];

const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];

export default () => {
const [dataSource, setDataSource] = useState(data);

const handleDragSortEnd = (
beforeIndex: number,
afterIndex: number,
newDataSource: any,
) => {
console.log('排序后的数据', newDataSource);
setDataSource(newDataSource);
message.success('修改列表排序成功');
};

return (

);
};
```

### © 版本信息

- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start with the DragSortTable demo at the linked Pro Components documentation and use the provided TypeScript reproduction to observe the issue. Trace the DragSortTable drag behavior and verify that dragging a row outside the table no longer leaves the surrounding scrollbar continuously moving up or down.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.