From 7bfc19c4f4889e7985460e670511ac4c07836dce Mon Sep 17 00:00:00 2001 From: zhaichao Date: Tue, 25 Aug 2026 10:43:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/styles/roomroot.scss | 12 +- frontend/src/directive/tableDrag/index.js | 108 ++++++++++++------ .../teachBusiness/trainingPlan/index.vue | 35 +++--- .../src/views/teachBusiness/venue/index.vue | 6 - .../src/views/teachOffice/teacher/index.vue | 24 ++-- 5 files changed, 113 insertions(+), 72 deletions(-) diff --git a/frontend/src/assets/styles/roomroot.scss b/frontend/src/assets/styles/roomroot.scss index d05468dc..337ee0a1 100644 --- a/frontend/src/assets/styles/roomroot.scss +++ b/frontend/src/assets/styles/roomroot.scss @@ -114,13 +114,21 @@ } } - // 表格横向拖拽滚动：拖拽过程中光标切换为“抓手” + // 表格横向拖拽滚动：拖拽过程中光标保持默认箭头，不切换为“抓手” .el-table__body-wrapper.is-dragging, .el-table__fixed-body-wrapper.is-dragging { - cursor: grabbing; + cursor: default; } } +/* 表格横拖期间锁定整页光标与文本选中： + 避免光标划过按钮/链接时闪变成手型、以及拖拽过程误选中文字 */ +body.el-table-dragging, +body.el-table-dragging * { + user-select: none !important; + cursor: default !important; +} + /* 原生表格同样禁止选中文本，避免横向滑动/滚动时误触发复制前的文本选中 */ table { -webkit-user-select: none; diff --git a/frontend/src/directive/tableDrag/index.js b/frontend/src/directive/tableDrag/index.js index c48c3963..5620b182 100644 --- a/frontend/src/directive/tableDrag/index.js +++ b/frontend/src/directive/tableDrag/index.js @@ -3,15 +3,18 @@ * 隐藏表格的横向滚动条，按住鼠标左键横向拖动即可查看后面的字段。 * 通过 document 事件委托全局生效，所有 el-table 自动支持，无需逐页绑定。 * - * 手感优化： - * - 文本选中已在全局样式中禁用（user-select: none），拖拽过程不会再误选文字 - * - 位移以横向为主且超过阈值才触发滚动，轻微手抖、普通点击、纵向拖拽（如行排序）不受影响 - * - 光标仅在真正拖动时变为抓手，平时保持默认 - * - 拖拽结束（确实发生了滚动）后屏蔽本次 click，避免误触发行点击、复选框等 + * 实现要点（全面优化）： + * - 采用 Pointer Events + setPointerCapture：按下瞬间把指针捕获到滚动容器上， + * 之后无论光标移动到固定列、表格下方还是窗口外，移动事件都不会中断，真正"跟手"。 + * - requestAnimationFrame 合并每帧滚动，避免高频事件造成卡顿/闪烁。 + * - 横向位移超过阈值即触发，允许轻微斜向/弧线；仅当纵向明显占优时才不触发， + * 保留普通点击与纵向拖拽（如行排序）的区分。 + * - 拖拽期间整页锁定光标与文本选中，光标保持默认箭头，不闪变为抓手/手型。 + * - 拖拽结束（确实发生了滚动）后屏蔽本次 click，避免误触发行点击、复选框等。 */ -const DRAG_THRESHOLD = 4 // 横向位移超过该像素且以横向为主，才判定为拖动 +const DRAG_THRESHOLD = 2 // 横向位移超过该像素即判定为拖动，越小越跟手 -// 在这些元素上按下鼠标不触发拖拽，保证按钮、复选框等交互不受影响 +// 在这些元素上按下不触发拖拽，保证按钮、复选框等交互不受影响 const INTERACTIVE_SELECTOR = [ 'a', 'button', 'input', 'textarea', 'select', 'label', '.el-button', '.el-checkbox', '.el-radio', '.el-switch', '.el-select', @@ -20,77 +23,112 @@ const INTERACTIVE_SELECTOR = [ ].join(',') let wrapper = null +let pointerId = null let startX = 0 let startY = 0 let startScrollLeft = 0 let dragging = false +let rafId = null +let pendingScrollLeft = 0 function isHorizontallyScrollable(el) { return el.scrollWidth > el.clientWidth + 1 } -function handleMouseDown(e) { - if (e.button !== 0) return +// 每帧只应用一次滚动位置，提升平滑度 +function applyScroll() { + if (!wrapper) return + wrapper.scrollLeft = pendingScrollLeft + rafId = null +} + +function handlePointerDown(e) { + if (e.button !== 0 && e.pointerType === 'mouse') return if (e.target.closest(INTERACTIVE_SELECTOR)) return - const wrap = e.target.closest('.el-table__body-wrapper') + // 固定列（如 fixed="right" 的操作列）渲染在 .el-table__fixed-body-wrapper 中，悬浮覆盖在 + // 表体右侧，需一并识别；最终统一落到真正负责横向滚动的 .el-table__body-wrapper 上 + const anyWrapper = e.target.closest('.el-table__body-wrapper, .el-table__fixed-body-wrapper') + if (!anyWrapper) return + const table = anyWrapper.closest('.el-table') + const wrap = table && table.querySelector('.el-table__body-wrapper') if (!wrap || !isHorizontallyScrollable(wrap)) return + wrapper = wrap + pointerId = e.pointerId startX = e.clientX startY = e.clientY startScrollLeft = wrap.scrollLeft + pendingScrollLeft = startScrollLeft dragging = false + + // 关键：捕获指针，之后所有 pointermove/pointerup 都持续派发到容器， + // 即使光标移出表体/窗口也不中断 + if (wrap.setPointerCapture && e.pointerId != null) { + try { wrap.setPointerCapture(e.pointerId) } catch (err) { /* 忽略捕获失败 */ } + } + // 阻止默认行为，抑制原生图片/文本拖拽与选中 + e.preventDefault() } -function handleMouseMove(e) { - if (!wrapper) return +function handlePointerMove(e) { + if (!wrapper || e.pointerId !== pointerId) return + e.preventDefault() const dx = e.clientX - startX const dy = e.clientY - startY if (!dragging) { - // 轻微位移视为点击，不触发滚动；位移必须以横向为主，避免与纵向拖拽（如行排序）冲突 - if (Math.abs(dx) <= DRAG_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) return - // 开始拖动：以当前位置为基准，避免起始跳变 + // 仅当纵向明显占优（超过横向 3 倍且超过 12px）才判定为纵向操作、不触发横向拖动， + // 其余情况（含轻微斜向/弧线）都正常触发，避免"拖不动" + if (Math.abs(dx) <= DRAG_THRESHOLD || (Math.abs(dy) > Math.abs(dx) * 3 && Math.abs(dy) > 12)) return dragging = true - startX = e.clientX - startY = e.clientY - startScrollLeft = wrapper.scrollLeft wrapper.classList.add('is-dragging') + // 整页锁定光标与文本选中，保证拖拽手感一致（光标不闪变、文字不误选） + document.body.classList.add('el-table-dragging') } - e.preventDefault() - wrapper.scrollLeft = startScrollLeft - (e.clientX - startX) + + // 记录目标位置，交由 rAF 统一应用 + pendingScrollLeft = startScrollLeft - (e.clientX - startX) + if (rafId == null) rafId = requestAnimationFrame(applyScroll) } -function handleMouseUp() { +function endDrag(blockClick) { if (!wrapper) return + if (rafId != null) { + cancelAnimationFrame(rafId) + rafId = null + } wrapper.classList.remove('is-dragging') - if (dragging) { + document.body.classList.remove('el-table-dragging') + if (blockClick && dragging) { // 拖拽确实发生了滚动，屏蔽本次 click，避免误触发行点击、复选框等 - const blockClick = (ev) => { + const suppress = (ev) => { ev.preventDefault() ev.stopPropagation() - document.removeEventListener('click', blockClick, true) + document.removeEventListener('click', suppress, true) } - document.addEventListener('click', blockClick, true) + document.addEventListener('click', suppress, true) } wrapper = null + pointerId = null dragging = false } -// 鼠标拖出窗口外时清理拖拽状态，防止状态残留 -function handleMouseLeave() { - if (!wrapper) return - wrapper.classList.remove('is-dragging') - wrapper = null - dragging = false +function handlePointerUp(e) { + if (e.pointerId !== pointerId) return + endDrag(true) +} + +function handlePointerCancel() { + endDrag(false) } const install = function() { if (install.installed) return install.installed = true - document.addEventListener('mousedown', handleMouseDown, false) - document.addEventListener('mousemove', handleMouseMove, false) - document.addEventListener('mouseup', handleMouseUp, false) - document.addEventListener('mouseleave', handleMouseLeave, false) + document.addEventListener('pointerdown', handlePointerDown, true) + document.addEventListener('pointermove', handlePointerMove, true) + document.addEventListener('pointerup', handlePointerUp, true) + document.addEventListener('pointercancel', handlePointerCancel, true) } export default install diff --git a/frontend/src/views/teachBusiness/trainingPlan/index.vue b/frontend/src/views/teachBusiness/trainingPlan/index.vue index 67cc4f44..be3ec9d4 100644 --- a/frontend/src/views/teachBusiness/trainingPlan/index.vue +++ b/frontend/src/views/teachBusiness/trainingPlan/index.vue @@ -6,22 +6,22 @@ - + - + - + - + @@ -65,17 +65,17 @@ - - - - - - - - - + + + + + + + + + - + @@ -92,7 +92,7 @@ - +