增加拖动列排序

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}
-                >
-                    {props.children}
-                </div>
-            )}
-        </Draggable>
+        <div
+            className={classNames(s.draggableDiv, className)}
+            style={style}
+            draggable={true}
+            onDragStart={onDragStart}
+            onDrag={onDragUpdate}
+            onDragEnd={onDragEnd}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+        >
+            {props.children}
+        </div>
     );
 };
 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/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[];