#yyds干货盘点# ant design中 table的表格行的拖拽实现

Posted 2022-03-22 前端歌谣

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点# ant design中 table的表格行的拖拽实现相关的知识，希望对你有一定的参考价值。

最好的种树是十年前,其次是现在。歌谣每天一个前端小知识提醒你改好好学习了知乎博主 csdn博主 b站博主放弃很容易但是坚持一定很酷我是歌谣喜欢就一键三连咯你得点赞是对歌谣最大的鼓励微信公众号关注小歌谣

前言

首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的完全没有思路

然后就打开官网的文档进行观看

开始

一开始准备写打开官网的一个文档是4.0的看起来也是一脸的蒙蔽

接着找到3的一个文档

重点

直接说说如何让实现当前这个功能上代码

代码部分

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;
 
class BodyRow extends React.Component 
  render() 
    const  isOver, connectDragSource, connectDropTarget, moveRow, ...restProps  
    = this.props;
    const style =  ...restProps.style, 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) 
    dragingIndex = props.index;
    return 
      index: props.index,
    ;
  ,
;
 
const rowTarget = 
  drop(props, monitor) 
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;
 
    // Dont replace items with themselves
    if (dragIndex === hoverIndex) 
      return;
    
 
    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);
 
    // Note: were mutating the monitor item here!
    // Generally its better to avoid mutations,
    // but its good here for the sake of performance
    // to avoid expensive index searches.
    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: Name,
    dataIndex: name,
    key: name,
  ,
  
    title: Age,
    dataIndex: age,
    key: age,
  ,
  
    title: Address,
    dataIndex: address,
    key: address,
  ,
];
 
class DragSortingTable extends React.Component 
  state = 
    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,
      ,
    ],
  ;
 
  components = 
    body: 
      row: DragableBodyRow,
    ,
  ;
 
  moveRow = (dragIndex, hoverIndex) => 
    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
          columns=columns
          dataSource=this.state.data
          components=this.components
          onRow=(record, index) => (
            index,
            moveRow: this.moveRow,
          )
        />
      </DndProvider>
    );
  

 
ReactDOM.render(<DragSortingTable />, mountNode);
#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;