增加拖动列排序

components/apolloTable/component/DragFixed.tsx

@@ -90,6 +90,7 @@ const DragFixed = (props: any) => {
         dividerWrap.style.display = 'none';
         // 滑块wrap移除hovered样式
         handleWrap.classList.remove(styles.hovered);
+        handleWrap.style.top = `${initTop}px`;
         handleWrap.style.left = fixedWidth;
         // 滑块隐藏
         handle.style.opacity = 0;

components/apolloTable/component/DragSorted.less

+@import '../common';
+
+.draggableDiv{
+    cursor: move;
+}
\ No newline at end of file

components/apolloTable/component/DragSorted.tsx

 import React, { useCallback } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import s from './DragSorted.less';
 
-const DragSorted = (props) => {
-    // using useCallback is optional
-    const onBeforeCapture = useCallback(() => {}, []);
-    const onBeforeDragStart = useCallback(() => {}, []);
-    const onDragStart = useCallback(() => {
-        debugger;
+const DragSorted = (props: any) => {
+    const { className, style, columnConfig, onDropFinish, onScroll } = props;
+    // 表格
+    const container: any = document.querySelector('#tableContainer');
+    // 拖拽列时的影子div
+    const columnCopyDiv: any = document.querySelector('#columnCopyDiv');
+    // 分割线wrap
+    const dividerWrap: any = document.querySelector('#dividerWrap');
+    // 分割线
+    const divider: any = document.querySelector('#divider');
+    // 左侧固定列分割线
+    const leftFixedHandleWrap: any = document.querySelector('#leftFixedHandleWrap');
+    // ? 拖动目标事件
+    // 开始拖动
+    const onDragStart = useCallback((e) => {
+        // 表格初始位置x点
+        const originLeft = container.getBoundingClientRect().x || 0;
+        // 拖动列矩形
+        const targetRect = e.target.getBoundingClientRect();
+        // 影子div显示
+        columnCopyDiv.style.display = 'block';
+        // 影子div初始x位置=拖动列x点-表格x点
+        columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
+        // 影子div宽度=拖动列宽度
+        columnCopyDiv.style.width = `${targetRect.width}px`;
+        // 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
+        const detaX = e.clientX - targetRect.x;
+        columnCopyDiv.setAttribute('data-deta-x', detaX);
+        // 将拖动列信息加入拖拽事件dataTransfer中，方便后续使用
+        e.dataTransfer.setData('dragColumn', JSON.stringify(columnConfig));
+        // debugger
+
+        divider.style.left = `${targetRect.x - originLeft}px`;
+        dividerWrap.style.display = 'block';
+    }, [columnConfig.columnName]);
+    // 拖动中
+    const onDragUpdate = useCallback((e) => {
+        // 拖动列矩形
+        const targetRect = e.target.getBoundingClientRect();
+        const tableRect = container.getBoundingClientRect();
+        const detaX = columnCopyDiv.getAttribute('data-deta-x');
+        const left = e.clientX - tableRect.x - detaX;
+        console.log('left: ', left);
+        // 影子div随鼠标移动
+        columnCopyDiv.style.left = `${left}px`;
+    }, []);
+    // 停止拖动
+    const onDragEnd = useCallback((e) => {
+        // 停止拖动时隐藏影子div
+        columnCopyDiv.style.display = 'none';
+        dividerWrap.style.display = 'none';
+        console.log('stop: ');
     }, []);
-    const onDragUpdate = useCallback(() => {}, []);
-    const onDragEnd = useCallback(() => {}, []);
+    // ? 投放目标事件
+    // 在投放目标中移动
+    const onDragOver = useCallback((e) => {
+        const tableRect = container.getBoundingClientRect();
+        const targetRect = e.target.getBoundingClientRect();
+        const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
+        const leftFixedHandleWrapRect = leftFixedHandleWrap.getBoundingClientRect();
+        const targetWidth = targetRect.width;
+        const targetX = targetRect.x;
+        const columnCopyDivWidth = columnCopyDivRect.width;
+        const columnCopyDivX = columnCopyDivRect.x;
+        // 影子div中间点的x坐标
+        const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
+        if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
+            // 影子div中点在投放目标中
+            divider.style.left = `${targetRect.x - tableRect.x}px`;
+        }
+        if (typeof onScroll === 'function') {
+            if (e.clientX > tableRect.right - 30) {
+                onScroll('right', 100);
+            } else if (e.clientX > tableRect.right - 100) {
+                onScroll('right', 10);
+            } else if (e.clientX < leftFixedHandleWrapRect.x + 100) {
+                onScroll('left', 10);
+            } else if (e.clientX < leftFixedHandleWrapRect.x + 30) {
+                onScroll('left', 100);
+            }
+        }
+
+        // 元素默认是不能够投放，需在目标元素的dragover事件中取消默认事件
+        var event = e || window.event;
+        event.preventDefault()
+    }, []);
+    // 在投放目标中松开鼠标
+    const onDrop = useCallback((e) => {
+        const targetRect = e.target.getBoundingClientRect();
+        const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
+        const targetWidth = targetRect.width;
+        const targetX = targetRect.x;
+        const columnCopyDivWidth = columnCopyDivRect.width;
+        const columnCopyDivX = columnCopyDivRect.x;
+        // 影子div中间点的x坐标
+        const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
+        if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
+            // 影子div中点在投放目标中
+            try {
+                const dragColumn = JSON.parse(e.dataTransfer.getData('dragColumn'));
+                const dropColumn = columnConfig;
+                if (typeof onDropFinish === 'function') {
+                    onDropFinish(dragColumn, dropColumn);
+                }
+            } catch (e) {
+                console.error('json解析失败')
+            }
+        }
+    }, [columnConfig.columnName]);
+
 
     return (
-        <Draggable draggableId="draggable-1" index={0}>
-            {(provided, snapshot) => (
         <div
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
+            className={classNames(s.draggableDiv, className)}
+            style={style}
+            draggable={true}
+            onDragStart={onDragStart}
+            onDrag={onDragUpdate}
+            onDragEnd={onDragEnd}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
         >
             {props.children}
         </div>
-            )}
-        </Draggable>
     );
 };
 export default DragSorted;

components/apolloTable/component/Table.less

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: row;
     border: 1px solid @borderColor;
+    overflow: hidden;
     &.scroll {
         height: 100%;
         .loading {
@@ -114,8 +115,9 @@
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.4);
-    z-index: 20;
+    z-index: 4;
     display: none;
+    pointer-events: none;
     .widthHandle {
         position: absolute;
         cursor: ew-resize;
@@ -134,3 +136,12 @@
     z-index: 1;
     background: #ececec;
 }
+.columnCopyDiv{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.3);
+    z-index: 5;
+    pointer-events: none;
+    display: none;
+}
\ No newline at end of file

components/apolloTable/component/Table.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import memoizeOne from 'memoize-one';
 import { Empty, Spin } from 'antd';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
 import { Resizable, ResizableBox } from 'react-resizable';
 import _ from 'lodash';
@@ -284,14 +283,31 @@ export default class AirTable extends Component<TableProps, TableState> {
             },
         );
     };
-
+    onScrollHor = (direction: string, step: number) => {
+        // 拖动超过视图范围，将表格左右滚动
+        if (this.grid4) {
+            if (direction === 'right') {
+                if (this.grid4.state.scrollLeft >= this.grid4.getTotalColumnsWidth() - this.state.tableWidth - 100) {
+                    console.log('已经到最右侧了')
+                    return;
+                }
+                this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft + step });
+            } else {
+                if (this.grid4.state.scrollLeft <= 0) {
+                    console.log('已经到最左侧了')
+                    return;
+                }
+                this.grid4.scrollToPosition({ scrollLeft: this.grid4.state.scrollLeft - step });
+            }
+        }
+    }
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
         { columnIndex, key, style }: any,
     ) => {
         if (showColumns.length === 0) return null;
-        const { sortConfig, showIndex, rowSelection, dataSource } = this.props;
+        const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted } = this.props;
         const {
             columnType = 1,
             columnName,
@@ -303,8 +319,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             requiredFlag,
         } = showColumns[columnIndex];
         return (
-            <div className={styles.headerCell} key={key} style={style}>
-                <DragSorted>
+            <DragSorted columnConfig={showColumns[columnIndex]} onDropFinish={onDragSorted} onScroll={this.onScrollHor} className={styles.headerCell} key={key} style={style}>
                 <ResizableBox
                     width={style.width}
                     handle={
@@ -338,7 +353,6 @@ export default class AirTable extends Component<TableProps, TableState> {
                     />
                 </ResizableBox>
             </DragSorted>
-            </div>
         );
     };
 
@@ -442,6 +456,8 @@ export default class AirTable extends Component<TableProps, TableState> {
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const showColumns = this.memoizeColumns(columns);
+
+
         const leftColumns = this.memoizeLeftColumns(columns);
         const rightColumns = this.memoizeRightColumns(columns);
         // 有隐藏列时，修正数据与列头不匹配问题
@@ -455,13 +471,8 @@ export default class AirTable extends Component<TableProps, TableState> {
         const rowCount = showData.length;
         const leftWidth = this.memoizeLeftWidth(leftColumns, showColumns);
         const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns);
-        // let totalHeight: number = rowCount * rowHeight;
         let totalHeight: number = tableHeight - headerHeight;
         const { totalWidth } = this.memoizeTotalWidth(showColumns);
-        // if (rowCount > 0 && totalWidth > tableWidth) {
-        //     // totalHeight = rowCount * rowHeight + scrollbarWidth;
-        //     totalHeight = tableHeight + scrollbarWidth;
-        // }
         let realWidth = tableWidth;
         let paddingRight = 0;
         if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
@@ -474,14 +485,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                     <ScrollSync>
                         {({ onScroll, scrollLeft, scrollTop }: any) => {
                             return (
-                                <DragDropContext>
-                                    <Droppable droppableId="droppable-1" type="PERSON">
-                                        {(provided, snapshot) => (
-                                            <div
-                                                ref={provided.innerRef}
-                                                style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
-                                                {...provided.droppableProps}
-                                            >
+
                                 <div
                                     className={
                                         this.props.onScroll
@@ -635,11 +639,6 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                             <div
                                                                 style={{
                                                                     height: totalHeight,
-                                                                                    // height: height - headerHeight,
-                                                                                    // minHeight:
-                                                                                    //     !dataSource || dataSource.length === 0
-                                                                                    //         ? '300px'
-                                                                                    //         : 'auto',
                                                                     width: tableWidth,
                                                                 }}
                                                             >
@@ -806,12 +805,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                                             }}
                                         />
                                     </div>
+                                    <div id="columnCopyDiv" className={styles.columnCopyDiv} />
                                 </div>
-                                                {provided.placeholder}
-                                            </div>
-                                        )}
-                                    </Droppable>
-                                </DragDropContext>
                             );
                         }}
                     </ScrollSync>

components/apolloTable/component/index.tsx

@@ -83,6 +83,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             loadComp,
             showCondition,
             canFixed,
+            onDragSorted,
         } = this.props;
         const sortConfig =
             operateConfig &&
@@ -137,6 +138,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                                 contentMenu={contentMenu}
                                 loadComp={loadComp}
                                 canFixed={canFixed}
+                                onDragSorted={onDragSorted}
                             />
                         </div>
                     </div>

components/apolloTable/component/interface.tsx

@@ -76,6 +76,7 @@ export interface TableProps extends LoadConfigProps {
     canFixed?: boolean;// 是否可以拖拽自定义固定列
     canSorted?: boolean;// 是否可以拖拽自定义列排序
     canResized?: boolean;// 是否可以拖拽自定义列伸缩
+    onDragSorted?:Function;// 拖拽更改列排序回调
 }
 export interface TableState {
     columns: ColumnProps[];