135 lines
5.0 KiB
JavaScript
135 lines
5.0 KiB
JavaScript
/**
|
|
* 表格横向拖拽滚动
|
|
* 隐藏表格的横向滚动条，按住鼠标左键横向拖动即可查看后面的字段。
|
|
* 通过 document 事件委托全局生效，所有 el-table 自动支持，无需逐页绑定。
|
|
*
|
|
* 实现要点（全面优化）：
|
|
* - 采用 Pointer Events + setPointerCapture：按下瞬间把指针捕获到滚动容器上，
|
|
* 之后无论光标移动到固定列、表格下方还是窗口外，移动事件都不会中断，真正"跟手"。
|
|
* - requestAnimationFrame 合并每帧滚动，避免高频事件造成卡顿/闪烁。
|
|
* - 横向位移超过阈值即触发，允许轻微斜向/弧线；仅当纵向明显占优时才不触发，
|
|
* 保留普通点击与纵向拖拽（如行排序）的区分。
|
|
* - 拖拽期间整页锁定光标与文本选中，光标保持默认箭头，不闪变为抓手/手型。
|
|
* - 拖拽结束（确实发生了滚动）后屏蔽本次 click，避免误触发行点击、复选框等。
|
|
*/
|
|
const DRAG_THRESHOLD = 2 // 横向位移超过该像素即判定为拖动，越小越跟手
|
|
|
|
// 在这些元素上按下不触发拖拽，保证按钮、复选框等交互不受影响
|
|
const INTERACTIVE_SELECTOR = [
|
|
'a', 'button', 'input', 'textarea', 'select', 'label',
|
|
'.el-button', '.el-checkbox', '.el-radio', '.el-switch', '.el-select',
|
|
'.el-link', '.el-dropdown', '.el-tooltip', '.el-color-picker',
|
|
'[contenteditable="true"]'
|
|
].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 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
|
|
// 固定列（如 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 handlePointerMove(e) {
|
|
if (!wrapper || e.pointerId !== pointerId) return
|
|
e.preventDefault()
|
|
const dx = e.clientX - startX
|
|
const dy = e.clientY - startY
|
|
|
|
if (!dragging) {
|
|
// 仅当纵向明显占优（超过横向 3 倍且超过 12px）才判定为纵向操作、不触发横向拖动，
|
|
// 其余情况（含轻微斜向/弧线）都正常触发，避免"拖不动"
|
|
if (Math.abs(dx) <= DRAG_THRESHOLD || (Math.abs(dy) > Math.abs(dx) * 3 && Math.abs(dy) > 12)) return
|
|
dragging = true
|
|
wrapper.classList.add('is-dragging')
|
|
// 整页锁定光标与文本选中，保证拖拽手感一致（光标不闪变、文字不误选）
|
|
document.body.classList.add('el-table-dragging')
|
|
}
|
|
|
|
// 记录目标位置，交由 rAF 统一应用
|
|
pendingScrollLeft = startScrollLeft - (e.clientX - startX)
|
|
if (rafId == null) rafId = requestAnimationFrame(applyScroll)
|
|
}
|
|
|
|
function endDrag(blockClick) {
|
|
if (!wrapper) return
|
|
if (rafId != null) {
|
|
cancelAnimationFrame(rafId)
|
|
rafId = null
|
|
}
|
|
wrapper.classList.remove('is-dragging')
|
|
document.body.classList.remove('el-table-dragging')
|
|
if (blockClick && dragging) {
|
|
// 拖拽确实发生了滚动，屏蔽本次 click，避免误触发行点击、复选框等
|
|
const suppress = (ev) => {
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
document.removeEventListener('click', suppress, true)
|
|
}
|
|
document.addEventListener('click', suppress, true)
|
|
}
|
|
wrapper = null
|
|
pointerId = 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('pointerdown', handlePointerDown, true)
|
|
document.addEventListener('pointermove', handlePointerMove, true)
|
|
document.addEventListener('pointerup', handlePointerUp, true)
|
|
document.addEventListener('pointercancel', handlePointerCancel, true)
|
|
}
|
|
|
|
export default install
|