React/AntDesign如何使表格行可拖动排序？ (表格拖拽排序)

Question

我一直在编写这个简单的单列拖放表格，但是当我拖动它们时，行并没有移动。我应该在哪里修复或检查？

我正在使用React、AntDesign和JavaScript（带有TypeScript）。

import * as React from 'react';

import ReactDOM from "react-dom";

import { Table } from "antd";

import { DndProvider, DragSource, DropTarget } from "react-dnd";

import HTML5Backend from "react-dnd-html5-backend";

import update from "immutability-helper";

let dragingIndex = -1;

interface propsDD {
    isOver: any,
    connectDragSource: any,
    connectDropTarget: any,
    moveRow: any,
    restProps: {
        readonly [x: string]: any;
        children?: React.ReactNode;
    }
    className: any,
    index: any,
}

class BodyRow extends React.Component<propsDD>{
    render() {
        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
        const style = { ...restProps, cursor: 'move' };
        let { className } = restProps;
        if (isOver) {
            if (restProps.index > dragingIndex) {
                className += " drop-over-downward";
            }
            if (restProps.index < dragingIndex) {
                className += " drop-over-upward";
            }
        }
        return connectDragSource(
            connectDropTarget(
                <tr {...restProps} className={className} style={style} />
            )
        );
    }
}

const rowSource = {
    beginDrag(props: any) {
        dragingIndex = props.index;
        return {
            index: props.index,
        };
    },
};

const rowTarget = {
    drop(props: any, monitor: any) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;
        if (dragIndex === hoverIndex) {
            return;
        }
        props.moveRow(dragIndex, hoverIndex);
        monitor.getItem().index = hoverIndex;
    },
};

const DragableBodyRow = DropTarget("row", rowTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
}))(
    DragSource("row", rowSource, connect => ({
        connectDragSource: connect.dragSource()
    }))(BodyRow)
);

const columns = [
    {
        title: 'Orden de Ejecución',
        dataIndex: 'attributes.name',
        key: 'name',
    },
];

type propsFromList = {
    receivedTasks: Task[],
    onReceivedTasks: (tasks: Task[]) => void,
}

export default class DDTasks extends React.Component<propsFromList, State>{
    public state: State = {
        data: [],
    };

    components = {
        body: {
            row: DragableBodyRow,
        },
    };

    onReceivedTasks(tasks: Task[]): void {
        this.setState({
            data: this.props.receivedTasks,
        } as State)
    }

    moveRow = (dragIndex: any, hoverIndex: any) => {
        const { data } = this.state;
        const dragRow = data[dragIndex];
        this.setState(
            update(this.state, {
                data: {
                    $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
                }
            })
        );
    };

    render() {
        return (
            < DndProvider backend={HTML5Backend} >
                <Table
                    rowKey="id"
                    bordered={true}
                    pagination={false}
                    columns={columns}
                    dataSource={this.props.receivedTasks}
                    components={this.components}
                    onRow={(index) => ({
                        index,
                        moveRow: this.moveRow,
                    })}
                />
            </DndProvider >
        );
    }
}

我希望能够拖动行，行的内容实际上是被显示的。

- Adrián Méndez

---

我已经为拖动效果（向下拖动和向上拖动）添加了CSS样式。 - Adrián Méndez

这是实际行为的gif图 https://makeagif.com/i/TIw7Qx - Adrián Méndez

Answer 1

这是一个我基于网上找到的不同资料进行总结而得出的简单示例：

本质上，这是调用 react 组件表格的主体，并通过索引映射位置列表，每行都可以拖动以允许用户修改表格。我还包括了与属性相关的函数调用。

return (
        <Tbody>
            {items.map((item, index) => (
                    <Tr key={index} className="item.name"
                        draggable={true}
                        onDragStart={this.dragstart}
                        onDragEnd={this.dragend}
                        onDragLeave={this.dragend}
                        onDragEnter={this.dragend}
                        onDrop={this.drop}
                        onDragOver={this.dragend}
                        id={index} >
                        <Td><span>{item.name}</span></Td>
                        <Td><span>{item.latitude}</span></Td>
                        <Td><span>{item.longitude}</span></Td>
                        <Td type="data"><span>{this.checkForZero(this.props.propDistances[index])}</span></Td>
                        <Td type="data"><span>{this.checkForZero(this.props.propCumulativeDist[index])}</span></Td>
                    </Tr>
            ))}
            {this.finishItineraryTable()}
        </Tbody>
    );

dragstart(event) {
    let dataTransfer = event.dataTransfer;
    let node = event.target;
    dataTransfer.setData('text/plain',node.innerHTML);
    dataTransfer.setData('id',node.id);
    event.stopPropagation();
}

dragend(event) {
    event.preventDefault();
}

drop(event) {
    event.preventDefault();
    let dragObjHtml = event.dataTransfer.getData("text/plain");
    let dragObjId = document.getElementById(event.dataTransfer.getData("id"));
    let dropTarget = event.target.closest("tr");
    let temp = dropTarget.innerHTML;
    dropTarget.innerHTML = dragObjHtml;
    dragObjId.innerHTML = temp;
}

- Matt Aertker

Answer 2

在我贴上长长的代码块之前，我想提一下几点：

• 它是基于 原始拖放排序示例 的。
• 幸运的是，React DnD 完美支持 TypeScript，因为它是用 TypeScript 编写的。
• 下面的代码是 Ant Design <table> 的替代品。
• 它是通用的。
• 它使用函数组件和钩子。
• 有一个 onDragSort，每次发生拖放排序时都会回调。参数包括排序后的数据。

首先安装包 react-dnd 和 react-dnd-html5-backend。将以下内容添加到您的 DragSortingTable.tsx 文件中：

import * as React from 'react';
import Table, { TableProps, TableComponents } from 'antd/lib/table';
import { DndProvider, DropTarget, DragSource, DragElementWrapper, DropTargetSpec } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

let dragingIndex = -1;

interface BodyRowProps {
  isOver: boolean;
  connectDragSource: DragElementWrapper<{}>;
  connectDropTarget: DragElementWrapper<{}>;
  style?: React.CSSProperties;
  index: number;
  className?: string;
}

const BodyRow: React.FC<BodyRowProps> = props => {
  const style = { ...props.style, cursor: 'move' };

  let { className } = props;
  if (props.isOver) {
    if (props.index > dragingIndex) {
      className += ' drop-over-downward';
    }
    if (props.index < dragingIndex) {
      className += ' drop-over-upward';
    }
  }

  return props.connectDragSource(
    props.connectDropTarget(
      <tr className={className} style={style}>
        {props.children}
      </tr>
    )
  );
};

const rowSource = {
  beginDrag(props) {
    dragingIndex = props.index;
    return {
      index: props.index
    };
  }
};

interface DropProps {
  index: number;
  moveRow: (dragIndex: number, hoverIndex: number) => void;
}

const rowTarget: DropTargetSpec<DropProps> = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  }
};

const DragableBodyRow = DropTarget<DropProps>('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver()
}))(
  DragSource('row', rowSource, connect => ({
    connectDragSource: connect.dragSource()
  }))(BodyRow)
);

interface DragSortingTableProps<T> extends TableProps<T> {
  onDragSort?: (sortedData: T[]) => void;
}

type extractTableType<T> = T extends DragSortingTableProps<infer T> ? T : never;

export const DragSortingTable: <T>(
  props: DragSortingTableProps<T>
) => React.ReactElement<DragSortingTableProps<T>> = props => {
  const [dataSource, setDataSource] = React.useState(props.dataSource);

  React.useEffect(() => {
    setDataSource(props.dataSource);
  }, [props.dataSource]);

  const components: TableComponents = {
    body: {
      row: DragableBodyRow
    }
  };

  const moveRow: DropProps['moveRow'] = (dragIndex, hoverIndex) => {
    const dragRow = dataSource[dragIndex];
    const remaining = dataSource.filter(i => i !== dragRow);
    const sorted = [...remaining.slice(0, hoverIndex), dragRow, ...remaining.slice(hoverIndex)];

    setDataSource(sorted);

    if (props.onDragSort) {
      props.onDragSort(sorted);
    }
  };

  const tableProps: TableProps<extractTableType<typeof props>> = {
    ...props,
    className: props.className ? props.className + ' drag-sorting-table' : 'drag-sorting-table',
    components,
    dataSource,
    onRow: (_record, index) => ({ index, moveRow })
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <Table {...tableProps}>{props.children}</Table>
    </DndProvider>
  );
};

请将以下样式添加到您的antd.less文件中进行覆盖：

.drag-sorting-table tr.drop-over-downward td {
  border-bottom: 2px dashed @primary-color;
}

.drag-sorting-table tr.drop-over-upward td {
  border-top: 2px dashed @primary-color;
}

按照以下步骤使用您的新拖动排序表：

<DragSortingTable<Users>
      dataSource={props.users}
      rowKey='id'
    >
      <Column
        title='Title'
        dataIndex='id'
        key='id'
      />
</DragSortingTable>

- Robin

Answer 3

我也在寻找类似的功能，并借助antd表格开发了支持多行拖放的组件。

可以通过拖放表格行来重新排序表格数据。

用户可以通过“Ctrl + 单击”选择多行。

https://github.com/sojinantony01/react-multi-row-dragable-table-antd

- sojin

Answer 4

你是否已经添加了antd可排序表格的CSS以显示拖动效果？

#components-table-demo-drag-sorting tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
}

#components-table-demo-drag-sorting tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
}

这里是沙盒链接

- Vipin Yadav

---

是的，我已经按照你说的添加了CSS样式。在之前的测试中，拖动效果有显示，但是在这个版本中没有显示。 - Adrián Méndez

你正在使用哪个版本的antd？请更新你的antd版本，然后检查。 - Vipin Yadav

我不确定我正在使用哪个AntD版本，但是这里是我试图复制的原始源代码：https://ant.design/components/table/#components-table-demo-drag-sorting - Adrián Méndez