修改拖拽排序

components/apolloTable/component/DragSorted.tsx

@@ -20,8 +20,14 @@ const DragSorted = (props: any) => {
     if (!canSorted || position === 'left' || position === 'right') {
         return <div className={s.sortedWrap}>{props.children}</div>;
     }
-    // 长按计时器
-    const timer: any = useRef(null);
+    // 按下鼠标
+    const pressed: any = useRef(false);
+    // copyDiv显示
+    const copyDivShow: any = useRef(false);
+    // 拖动列
+    const dragCol: any = useRef();
+    // 放置列
+    const dropCol: any = useRef();
     // 表格滚动计时器
     const timerInterval: any = useRef(null);
     // 表格
@@ -37,6 +43,15 @@ const DragSorted = (props: any) => {
     const rightFixedHandleWrap: any = document.querySelector('#rightFixedHandleWrap');
     // 监听鼠标移动
     const onMouseMove = useCallback((e) => {
+        if (!pressed.current) {
+            // 移除全局事件
+            document.body.removeEventListener('mousemove', onMouseMove, false);
+            document.body.removeEventListener('mouseup', onMouseUp, false);
+            return;
+        }
+        if (!copyDivShow.current) {
+            initCopyDiv(e);
+        }
         const tableRect = container.getBoundingClientRect();
         const detaX = columnCopyDiv.getAttribute('data-deta-x');
         // 所有列
@@ -70,8 +85,10 @@ const DragSorted = (props: any) => {
                 // 收集投放目标的信息
                 const dropColumn = dom.getAttribute('data-column-name') || '';
                 const dropColumnOrder = dom.getAttribute('data-column-order') || '';
-                divider.setAttribute('data-drop-column', dropColumn);
-                divider.setAttribute('data-drop-order', dropColumnOrder);
+                dropCol.current = {
+                    columnName: dropColumn,
+                    orderNo: dropColumnOrder,
+                };
             }
         });
 
@@ -114,26 +131,13 @@ const DragSorted = (props: any) => {
     }, []);
     // 监听鼠标抬起
     const onMouseUp = useCallback(() => {
-        // 清空计时器
-        if (timer.current) {
-            clearTimeout(timer.current);
-            timer.current = null;
-        }
-        if (timerInterval.current) {
-            clearInterval(timerInterval.current);
-            timerInterval.current = null;
-        }
-        // 移除全局事件
-        document.body.removeEventListener('mousemove', onMouseMove, false);
-        document.body.removeEventListener('mouseup', onMouseUp, false);
-        // 停止拖动时隐藏影子div
-        columnCopyDiv.style.display = 'none';
-        dividerWrap.style.display = 'none';
         // 获取分割线上挂载的拖动列和投放列信息
-        const dragColumn = divider.getAttribute('data-drag-column');
-        const dragColumnOrder = divider.getAttribute('data-drag-order');
-        const dropColumn = divider.getAttribute('data-drop-column');
-        const dropColumnOrder = divider.getAttribute('data-drop-order');
+        const dragColumn = dragCol.current && dragCol.current.columnName;
+        const dragColumnOrder = dragCol.current && dragCol.current.orderNo;
+        const dropColumn = dropCol.current && dropCol.current.columnName;
+        const dropColumnOrder = dropCol.current && dropCol.current.orderNo;
+        // 清理操作
+        clean();
         // 没有列信息
         if (!dragColumn || !dropColumn) {
             return;
@@ -215,40 +219,62 @@ const DragSorted = (props: any) => {
             if (e.button !== 0) {
                 return;
             }
+            // 鼠标按下标记
+            pressed.current = true;
+            // 记录拖动列
+            dragCol.current = {
+                columnName,
+                orderNo,
+            };
+            // 全局添加监听鼠标移动和松开事件
+            document.body.addEventListener('mousemove', onMouseMove, false);
+            document.body.addEventListener('mouseup', onMouseUp, false);
+        },
+        [onMouseMove, onMouseUp],
+    );
+    // 初始化影子div位置
+    const initCopyDiv = useCallback(
+        (e) => {
             // 表格初始位置x点
             const originLeft = container.getBoundingClientRect().x || 0;
             // 拖动列矩形
-            const targetRect = e.currentTarget.getBoundingClientRect();
+            const targetRect = e.target.offsetParent.getBoundingClientRect();
             const curX = e.clientX;
-            // 500ms长按事件，表示想要拖拽
-            timer.current = setTimeout(() => {
-                // 影子div显示
-                columnCopyDiv.style.display = 'block';
-                // 影子div初始x位置=拖动列x点-表格x点
-                columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
-                // 影子div宽度=拖动列宽度
-                columnCopyDiv.style.width = `${targetRect.width}px`;
-                columnCopyDiv.innerText = columnChsName;
-                // 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
-                const detaX = curX - targetRect.x;
-                columnCopyDiv.setAttribute('data-deta-x', String(detaX));
-                // 分割线初始位置为当前列
-                divider.style.left = `${targetRect.x - originLeft}px`;
-                dividerWrap.style.display = 'block';
-                // 给分割线设置拖动列信息，移除投放列信息
-                divider.setAttribute('data-drag-column', columnName);
-                divider.setAttribute('data-drag-order', orderNo);
-                divider.removeAttribute('data-drop-column');
-                divider.removeAttribute('data-drop-order');
-                // 全局添加监听鼠标移动和松开事件
-                document.body.addEventListener('mousemove', onMouseMove, false);
-                document.body.addEventListener('mouseup', onMouseUp, false);
-            }, 500);
-            // 阻止默认行为
-            e.preventDefault();
+            // 影子div显示
+            columnCopyDiv.style.display = 'block';
+            // 影子div初始x位置=拖动列x点-表格x点
+            columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
+            // 影子div宽度=拖动列宽度
+            columnCopyDiv.style.width = `${targetRect.width}px`;
+            columnCopyDiv.innerText = columnChsName;
+            // 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
+            const detaX = curX - targetRect.x;
+            columnCopyDiv.setAttribute('data-deta-x', String(detaX));
+            // 分割线初始位置为当前列
+            divider.style.left = `${targetRect.x - originLeft}px`;
+            dividerWrap.style.display = 'block';
+            copyDivShow.current = true;
         },
-        [columnName, orderNo, onMouseMove, onMouseUp],
+        [columnName, orderNo],
     );
+    const clean = useCallback(() => {
+        // 鼠标松开
+        pressed.current = false;
+        // 清空计时器
+        if (timerInterval.current) {
+            clearInterval(timerInterval.current);
+            timerInterval.current = null;
+        }
+        // 移除全局事件
+        document.body.removeEventListener('mousemove', onMouseMove, false);
+        document.body.removeEventListener('mouseup', onMouseUp, false);
+        // 停止拖动时隐藏影子div
+        columnCopyDiv.style.display = 'none';
+        dividerWrap.style.display = 'none';
+        copyDivShow.current = false;
+        dragCol.current = null;
+        dropCol.current = null;
+    }, [onMouseMove, onMouseUp]);
 
     return (
         <div