vue 拖拽事件

128 阅读1分钟
<div ref="draggable" style="overflow: auto; flex: 1" @mousedown="moves">

const draggable = ref(null)
function moves(e) {
  var nav = draggable.value
  let downX = e.clientX
  let scrollLeft = e.target.scrollLeft
  nav.onmousemove = function (event) {
    let moveX = event.clientX // 获取移动的x轴
    let scrollX = moveX - downX // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
    this.scrollLeft = scrollLeft - scrollX
  }
  nav.onmouseup = function () {
    nav.onmousemove = null
  }
  nav.addEventListener('mouseleave', function (event) {
    nav.onmousemove = null
  })
}