React + TS 中实现鼠标水平拖动，横向滚动 | Mouse click and Drag Instead of Horizontal Scroll bar

背景

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

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

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

寻找答案

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

• Mouse click and Drag Instead of Horizontal Scroll bar( To view full content of child Div)
• 使用鼠标拖拽div，实现横向滚动
• vue指令-鼠标拖动

首先是这个第一篇，是在 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，下期再见。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！