vue3鼠标拖拽滑动效果,阻止滑动时内部的点击效果

改自 vue3鼠标拖拽滑动效果，原文如下

https://blog.csdn.net/weixin_52923266/article/details/132476743

增加了滑动时阻止内部点击事件

第一步

在utils下面新建一个directives.js文件，然后引入如下代码

const dragscroll = (el) => {
  let isDragging = false;

  el.onmousedown = ev => {
    isDragging = false;
    const disX = ev.clientX;
    const disY = ev.clientY;
    const originalScrollLeft = el.scrollLeft;
    const originalScrollTop = el.scrollTop;
    const originalScrollBehavior = el.style['scroll-behavior'];
    const originalPointerEvents = el.style['pointer-events'];
    el.style['scroll-behavior'] = 'auto';

    const onMouseMove = dv => {
      dv.preventDefault();
      isDragging = true;
      const distanceX = dv.clientX - disX;
      const distanceY = dv.clientY - disY;
      el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);
    };

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      el.style['scroll-behavior'] = originalScrollBehavior;
      el.style['pointer-events'] = originalPointerEvents;

      // 使用延时器在鼠标释放后的一小段时间内保持 isDragging 为 true
      setTimeout(() => {
        isDragging = false;
      }, 50);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };

  el.addEventListener('click', ev => {
    if (isDragging) {
      ev.stopImmediatePropagation();
      ev.preventDefault();
    }
  }, true); // 使用捕获阶段的事件监听器
};

export default {
  mounted(el) {
    dragscroll(el);
  }
};

第二步

在main.js中引入

import dragscroll from '@/utils/directives.js'
app.directive('dragscroll',dragscroll)

 第三步

页面直接使用即可

<div id="imgBox" v-dragscroll>
   <img src="@/assets/images/image.svg" alt="" />
</div>