VUE实现某区域中拖拽效果

最新推荐文章于 2025-02-21 14:39:32 发布

荻野泽溪

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/MISS_CJL/article/details/119378544

版权

参考链接：

https://haofly.net/vue-dragscroll/

main.js

Vue.directive('dragscroll', function (el) {
  el.onmousedown = function (ev) {
    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'
    // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
    document.onmousemove = function (ev) {
      ev.preventDefault()
      const distanceX = ev.clientX - disX
      const distanceY = ev.clientY - disY
      // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) // 该写法不兼容IE，换成下面两行
      el.scr