From 40dbd9f1fed8c065f24545329a08938d600890c0 Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Wed, 9 Dec 2020 19:21:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8B=96=E6=8B=BD=E6=8E=92?= =?UTF-8?q?=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../apolloTable/component/DragSorted.tsx | 128 +++++++++++------- 1 file changed, 77 insertions(+), 51 deletions(-) diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx index 9f3e2bf..561b945 100644 --- a/components/apolloTable/component/DragSorted.tsx +++ b/components/apolloTable/component/DragSorted.tsx @@ -20,8 +20,14 @@ const DragSorted = (props: any) => { if (!canSorted || position === 'left' || position === 'right') { return
{props.children}
; } - // 长按计时器 - 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 (