--- order: 27 title: en-US: Drag sorting with handler zh-CN: 拖拽手柄列 --- ## zh-CN 也可以使用 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) 来实现一个拖拽操作列。 ## en-US Alternatively you can implement drag sorting with handler using [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc). ```jsx import { Table } from 'antd'; import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'; import { MenuOutlined } from '@ant-design/icons'; import { arrayMoveImmutable } from 'array-move'; const DragHandle = sortableHandle(() => ); const columns = [ { title: 'Sort', dataIndex: 'sort', width: 30, className: 'drag-visible', render: () => , }, { title: 'Name', dataIndex: 'name', className: 'drag-visible', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', index: 0, }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', index: 1, }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', index: 2, }, ]; const SortableItem = sortableElement(props => ); const SortableContainer = sortableContainer(props => ); class SortableTable extends React.Component { state = { dataSource: data, }; onSortEnd = ({ oldIndex, newIndex }) => { const { dataSource } = this.state; if (oldIndex !== newIndex) { const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el); console.log('Sorted items: ', newData); this.setState({ dataSource: newData }); } }; DraggableContainer = props => ( ); DraggableBodyRow = ({ className, style, ...restProps }) => { const { dataSource } = this.state; // function findIndex base on Table rowKey props and should always be a right array index const index = dataSource.findIndex(x => x.index === restProps['data-row-key']); return ; }; render() { const { dataSource } = this.state; return ( ); } } ReactDOM.render(, mountNode); ``` ```css .row-dragging { background: #fafafa; border: 1px solid #ccc; } .row-dragging td { padding: 16px; } .row-dragging .drag-visible { visibility: visible; } ```