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

[DieHunter1024]

提问前先看看：

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 拖动行到表格以外会导致外部下拉滚动条向下或向上滚动无法停止的问题

📷 复现步骤

🏞 期望结果

💻 复现代码

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 (
    <DragSortTable
      headerTitle="拖拽排序(默认把手)"
      columns={columns}
      rowKey="key"
      search={false}
      pagination={false}
      dataSource={dataSource}
      dragSortKey="sort"
      onDragSortEnd={handleDragSortEnd}
    />
  );
};

© 版本信息

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

🚑 其他信息

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#7932][🐛[BUG] DragSortTable 拖拽会导致页面持续滚动][63%]

[DieHunter1024]

import { DragSortTableProps } from '@/components/data-table/type';
import React, { useContext } from 'react';
import { ProTable, SzButton } from 'sz-components';
import { HolderOutlined } from '@ant-design/icons';
import './index.scss';
type DragSortDataTableProps<T = any> = {
    dragSortKey: string;
} & DragSortTableProps<T>;
const DragHandle: React.FC = () => {
    return <SzButton type="text" size="small" icon={<HolderOutlined />} style={{ cursor: 'move' }} />;
};
const DragSortContext = React.createContext<any>({
    dragItem: null,
    dragOverItem: null,
});
export const DragSortDataTable = <T extends Record<string, any>>(props: DragSortDataTableProps<T>) => {
    const { dragSortKey, headerTitle, hideInTable, columns = [], dataSource = [], onDragSortEnd, ...rest } = props;
    const dragContext = useContext(DragSortContext);
    const handleDragStart = (index: any) => {
        dragContext.dragItem = index;
        console.log(index, 'Start');
    };
    const handleDragEnter = (index: any) => {
        if (dragContext.dragOverItem === index) return;
        dragContext.dragOverItem = index;
        setClassName(index)
        console.log(index);
    };
    const setClassName = (index: any) => {
        const elems = document.querySelectorAll(`.drag-item`)
        const list = Array.from(elems)
        list.forEach((it) => {
            it.classList.remove('drag-active')
        })
        const active = list?.[index]
        active?.classList?.add('drag-active')
    };
    const handleDragEnd = (index: any) => {
        const items = Array.from(dataSource);
        const dragItemIndex = dragContext.dragItem;
        const dragOverItemIndex = dragContext.dragOverItem;
        if (dragItemIndex !== null && dragOverItemIndex !== null) {
            const [draggedItem] = items.splice(dragItemIndex, 1);
            items.splice(dragOverItemIndex, 0, draggedItem);
            onDragSortEnd?.(items);
        }
        setClassName(null)
        dragContext.dragItem = null;
        dragContext.dragOverItem = null;
    };

    const DraggableRow = (props: any) => {
        const { children } = props;
        const item: any = Array.from(children);
        const sort = item.find((it: any) => it.key === dragSortKey);
        const index = sort?.props?.index;
        return (
            <tr
                className={`drag-item`}
                draggable
                onDragStart={() => handleDragStart(index)}
                onDragEnter={() => handleDragEnter(index)}
                onDragEnd={handleDragEnd}
            >
                {children}
            </tr>
        );
    };
    const icon = { key: 'sort', width: 80, render: () => <DragHandle /> };
    return (
        <DragSortContext.Provider value={dragContext}>
            <ProTable<T>
                {...rest}
                columns={[icon, ...columns]}
                dataSource={dataSource}
                id="drag-sort-table"
                components={{
                    body: {
                        row: DraggableRow,
                    },
                }}
            />
        </DragSortContext.Provider>
    );
};

.ant-table {
    .drag-active {
        background: rgba(0, 0, 0, 0.1);
        transition: 'background' 0.5s ease-in-out;
        -webkit-transition: 'background' 0.5s ease-in-out;
        -moz-transition: 'background' 0.5s ease-in-out;
        -ms-transition: 'background' 0.5s ease-in-out;
        -o-transition: 'background' 0.5s ease-in-out;
    }
}

目前手动实现了一套方案，没借助三方库，有需要可以参考一下

[zhupp034]

这个问题没人处理吗，我也遇到了

[DieHunter1024]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

[chenJJ-88]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

这个是可编辑，可拖拽的表格吗？

[DieHunter1024]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

这个是可编辑，可拖拽的表格吗？

不是，这个要自己把ProTable改成Edit

[DieHunter1024]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

这个是可编辑，可拖拽的表格吗？

我实现了一套可编辑可拖拽的，供公司使用，但是业务度较强，不适合封装组件，如有需要或参考请回复

[chenJJ-88]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

这个是可编辑，可拖拽的表格吗？

我实现了一套可编辑可拖拽的，供公司使用，但是业务度较强，不适合封装组件，如有需要或参考请回复

可以发我参考一下吗

[DieHunter1024]

这个问题没人处理吗，我也遇到了

试试我的吧，官方没回复。。。。

这个是可编辑，可拖拽的表格吗？

我实现了一套可编辑可拖拽的，供公司使用，但是业务度较强，不适合封装组件，如有需要或参考请回复

可以发我参考一下吗

https://github.com/DieHunter1024/pro-table-example 需求还未提测，有bug还请理解