update dragResize dir and fixed ui

components/apolloTable/component/DragFixed.tsx

@@ -36,6 +36,10 @@ const DragFixed = (props: any) => {
 
     const onMouseMoveWrap = (e: any) => {
         // 滑块位置跟随鼠标上下移动
+        const handleWrapRect = handleWrap.getBoundingClientRect();
+        if (e.clientY < handleWrapRect.y) {
+            return;
+        }
         handle.style.top = `${e.clientY}px`;
     };
 
@@ -51,7 +55,7 @@ const DragFixed = (props: any) => {
             onResizeStart();
         }
         const originLeft = container.getBoundingClientRect().x || 0;
-        handleWrap.style.top = 0;
+        // handleWrap.style.top = 0;
         handleWrap.style.left = `${e.x - originLeft}px`;
     };
 
@@ -95,7 +99,7 @@ const DragFixed = (props: any) => {
         dividerWrap.style.display = 'none';
         // 滑块wrap移除hovered样式
         handleWrap.classList.remove(styles.hovered);
-        handleWrap.style.top = `${initTop}px`;
+        // handleWrap.style.top = `${initTop}px`;
         handleWrap.style.left = fixedWidth;
         // 滑块隐藏
         handle.style.opacity = 0;

components/apolloTable/component/DragResized.less

@@ -5,10 +5,13 @@
     width: 2px;
     height: 100%;
     bottom: 0;
-    right: -1px;
+    right: 0px;
     cursor: ew-resize;
     z-index: 1;
     background: #ececec;
+    &.right{
+        left: 0px;
+    }
     &:hover {
         background-color: rgb(33, 150, 243);
     }

components/apolloTable/component/DragResized.tsx

 import React from 'react';
+import classNames from 'classnames';
 import { ResizableBox } from 'react-resizable';
 import { getCache, saveCache } from '../utils/cache';
 import styles from './DragResized.less';
 
 const DragResized = (props: any) => {
-    const { style, columnName, tableId, canResized, onDragResized, onDragResizedCb, cachedFeAttr, columns } = props;
+    const {
+        style,
+        columnName,
+        tableId,
+        canResized,
+        onDragResized,
+        onDragResizedCb,
+        cachedFeAttr,
+        columns,
+        position,
+    } = props;
     if (!canResized) {
         return <div style={style}>{props.children}</div>;
     }
@@ -65,7 +76,7 @@ const DragResized = (props: any) => {
             height={style.height}
             handle={
                 <span
-                    className={styles.handleWidth}
+                    className={position === 'right' ? classNames(styles.handleWidth, styles.right) : styles.handleWidth}
                     onClick={(e) => {
                         e.stopPropagation();
                     }}
@@ -76,6 +87,7 @@ const DragResized = (props: any) => {
             onResize={onResizeWidth}
             onResizeStop={onResizeWidthStop}
             draggableOpts={{ enableUserSelectHack: false }}
+            resizeHandles={position === 'right' ? ['w'] : ['e']}
         >
             {props.children}
         </ResizableBox>

components/apolloTable/component/RightDragFixed.tsx

@@ -37,6 +37,10 @@ const DragFixed = (props: any) => {
 
     const onMouseMoveWrap = (e: any) => {
         // 滑块位置跟随鼠标上下移动
+        const handleWrapRect = handleWrap.getBoundingClientRect();
+        if (e.clientY < handleWrapRect.y) {
+            return;
+        }
         handle.style.top = `${e.clientY}px`;
     };
 
@@ -52,7 +56,7 @@ const DragFixed = (props: any) => {
             onResizeStart();
         }
         const originLeft = container.getBoundingClientRect().x || 0;
-        handleWrap.style.top = 0;
+        // handleWrap.style.top = 0;
         handleWrap.style.left = `${e.x - originLeft}px`;
     };
 
@@ -101,7 +105,7 @@ const DragFixed = (props: any) => {
         dividerWrap.style.display = 'none';
         // 滑块wrap移除hovered样式
         handleWrap.classList.remove(styles.hovered);
-        handleWrap.style.top = `${initTop}px`;
+        // handleWrap.style.top = `${initTop}px`;
         handleWrap.style.left = fixedWidth;
         // 滑块隐藏
         handle.style.opacity = 0;

components/apolloTable/component/Table.tsx

@@ -270,6 +270,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                 cachedFeAttr={cachedFeAttr}
                 onDragResizedCb={this.onDragResizedCb}
                 columns={formatColumns}
+                position={position}
             >
                 <DragSorted
                     columnName={columnName}