背景

最近接到一个新需求,就是有一个流程的东西,而这个流程可能会比较多,那么在水平就需要 scroll-x,表面上使用触摸板双指即可拖动,但是产品和测试讨论之后觉得鼠标也需要拖拽滑动。

但鼠标可以通过点击滚动条即可滑动,那么,既然需求砍不掉,那就试着做一做。

具体任务也很明确了,就是希望鼠标在流程中可支持拖动。

寻找答案

在网上找了许多的资料,实在是太多重复而无用的内容了,不过功夫不负有心人,找到了几篇有用的资料,如下:

首先是这个第一篇,是在 stack overflow 上看到的,怎么说呢,算是给自己一个寻找方向的博客,刚开始做的时候搜索都不知道怎么表达。

第二篇是给我一些灵感的博客,而第三篇基本上满足我的需求了,不过这里面有一点小问题,在下文代码处继续来说。

解决问题

获取 DOM

在 react 中我们可以通过 useRef 来获取 dom 节点,如下进行 ref 绑定。

const statusLineRef = useRef(null);
<div className={s.statusLine} ref={statusLineRef}>

代码分析

其中也有发现一点问题,如下改动:

//鼠标释放
on(el,'mouseup',scrollMouseup);

on(document, 'mouseup', scrollMouseup);

因为在自己拖动的时候发现,如果我鼠标释放点在 div 里面倒正常,但是当我按着不动,将鼠标放在 div 之外的地方释放,那么,这个释放操作并不会取消掉,鼠标放回 div 中,发现还可以拖动,于是将 el 改成了 document。

以下是解决的代码,使用了 TS,对原作者代码有一定的改动。

useEffect(() => {
const on = function(
element: { addEventListener: (arg0: any, arg1: any, arg2: boolean) => void },
event: any,
handler: any
) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};

const off = function(
element: { removeEventListener: (arg0: any, arg1: any, arg2: boolean) => void },
event: any,
handler: any
) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};

let targetDrag = {
isDown: false,
coord: {
x: 0,
y: 0,
},
};

const scrollMousedown = (event: { pageX: number; pageY: number }) => {
targetDrag.isDown = true;
targetDrag.coord.x = event.pageX;
targetDrag.coord.y = event.pageY;
};
const scrollMouseup = () => {
targetDrag.isDown = false;
targetDrag.coord.x = 0;
targetDrag.coord.y = 0;
};

let el = statusLineRef.current as any;

const scrollMousemove = (event: { pageX: number }) => {
let movX = targetDrag.coord.x - event.pageX;
targetDrag.coord.x = event.pageX;
if (targetDrag.isDown) {
el.scrollLeft = el.scrollLeft + movX;
}
};

if (el) {
on(el, 'mousedown', scrollMousedown);
on(document, 'mouseup', scrollMouseup);
on(el, 'mousemove', scrollMousemove);
}
return () => {
if (el) {
off(el, 'mousedown', scrollMousedown);
off(document, 'mouseup', scrollMouseup);
off(el, 'mousemove', scrollMousemove);
}
};
}, [dataList]);

结尾

在此记录一下,方便以后回顾,如果你有发现问题或者有更好的解决方案可以讨论,我是 Chocolate,下期再见。