vue+ts写的拖拽不生效

• Z时代
• 2024-02-26
• 分类：IT

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

// 拖动

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
  }
}

以上是 vue+ts写的拖拽不生效 的全部内容， 来源链接： utcz.com/p/936667.html