vue+ts写的拖拽不生效

无法拖动表格,求大佬指点。拖动不了嵌套了表格的div,
但是可以拖动一个单独的div方块。这是怎么回事呢
image.png

// 拖动

drage () {
  let el = document.getElementById('productlistbox') // 获取操作元素
  let oDiv = el

  let self = this

  document.onselectstart = function () {
    return false
  }
  oDiv.onmousedown = function (e) {
    // 鼠标按下,计算当前元素距离可视区的距离
    let disX = e.clientX - oDiv.offsetLeft
    let disY = e.clientY - oDiv.offsetTop
    document.onmousemove = function (e) {
      // 通过事件委托,计算移动的距离
      let l = e.clientX - disX
      let t = e.clientY - disY
      // 不超出可视范围
      if (l <= 0) {
        l = 5 // 设置成5,离边缘不要太近
      } else if (l > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度
        l = document.documentElement.clientWidth - el.clientWidth - 5
      }

      if (t <= 0) {
        t = 5
      } else if (t > document.documentElement.clientHeight - el.clientHeight) {
        t = document.documentElement.clientHeight - el.clientHeight - 5
      }
      // 移动当前元素
      oDiv.style.left = l + 'px'
      oDiv.style.top = t + 'px'
    }
    document.onmouseup = function (e) {
      document.onmousemove = null
      document.onmouseup = null
    }
    // return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
    return false
  }
}
阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题