vue 有滚动条 点击拖拽滑动自定义指令

<div class="wrap" v-flowDrag>

directives: {
    flowDrag: {
      bind(el, binding, vnode, oldNode) {
        if (!binding) {
          return
        }
        el.onmousedown = e => {
          if (e.button == 2) {
            // 右键不管
            return
          }
          //  鼠标按下,计算当前原始距离可视区的高度
          let disX = e.clientX
          let disY = e.clientY
          el.style.cursor = "move"

          document.onmousemove = function(e) {
            // 移动时禁止默认事件
            e.preventDefault()
            const left = e.clientX - disX
            disX = e.clientX
            el.scrollLeft += -left

            const top = e.clientY - disY
            disY = e.clientY
            el.scrollTop += -top
          }

          document.onmouseup = function(e) {
            el.style.cursor = "auto"
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  }

猜你喜欢

转载自blog.csdn.net/z591102/article/details/125432253
今日推荐