antd的表格拖拽

Posted 2023-04-26

参考技术A import  DndProvider, useDrag, useDrop  from 'react-dnd';

import  html5Backend  from 'react-dnd-html5-backend';

import update from 'immutability-helper';

const type = 'DragableBodyRow';

const DragableBodyRow = ( index, moveRow, className, style, ...restProps ) => 

    const ref = useRef();

    const [ isOver, dropClassName , drop] = useDrop(

      accept: type,

      collect: monitor => 

        const  index: dragIndex  = monitor.getItem() || ;

        if (dragIndex === index) 

          return ;

        

        return 

          isOver: monitor.isOver(),

          dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',

        ;

      ,

      drop: item => 

        moveRow(item.index, index);

      ,

    );

    const [, drag] = useDrag(

      type,

      item:  index ,

      collect: monitor => (

        isDragging: monitor.isDragging(),

      ),

    );

    drop(drag(ref));

    return (

      <tr

        ref=ref

        className=`$className$isOver ? dropClassName : ''`

        style= cursor: 'move', ...style 

        ...restProps

      />

    );

  ;

方法：

 //拖拽

    const components = 

        body: 

          row: DragableBodyRow,

        ,

    ;

    const moveRow = useCallback(

        (dragIndex, hoverIndex) => 

          console.log('dragIndex, hoverIndex',dragIndex, hoverIndex)

          console.log('data',data)

        //   var data = data.items

          console.log('data.items',data.items)

          const dragRow = data.items[dragIndex];

          console.log('dragRow',dragRow)

          setData(

             items:update(data.items, 

                $splice: [

                  [dragIndex, 1],

                  [hoverIndex, 0, dragRow],

                ],

              ),

          );

        ,

        [data],

    );

用法：

 <AdvancedTable 

                            data=data 

                            columns=columns 

></AdvancedTable>

react 表格单元格拖拽

最近公司做一个项目 其中有一项功能就是实现 表格内的标题单元格(所在列)可以进行拖拽 其下的数据也要跟随着拖动

参考技术A 主要就是三个步骤：
1.onmousedown的时候，启动可拖拽事件，记录被拖拽元素的原始坐标参数。
2.onmousemove的时候，实时记录鼠标移动的距离，结合被拖拽元素第一阶段的坐标参数，计算并设置新的坐标值。
3.onmouseup的时候，关闭可拖拽事件，记录新的坐标值。