vue3 拖拽事件不跟手 稍微快些div就会脱离鼠标问题

vue3 使用mousedown、mousemove、mouseup事件来实现div的拖拽
发现不跟手 稍微快些div就会脱离鼠标
请问你们在写拖拽时有遇到这个问题吗

你的事件不能写道div上 要写到body上

应该是 屏幕刷新率的问题。需要写一个 依赖 requestAnimationFrame 的节流

const rafThrottle = (callBack?) => {
    let locked = false
    return function (...args) {
        if (locked) return
        locked = true
        window.requestAnimationFrame(_ => {
            callBack.apply(this, args)
            locked = false
        })
    }
}

rafThrottle(()=>{
  // 你修改dom x y 的逻辑写在这里。
})()

• 这篇文章：实现Vue 电脑端 PC端 鼠标拖拽横向移动 & 鼠标事件mousedown mouseup mousemove和单击事件click冲突问题& 盒模型冲撞取消拖拽状态问题 也许能够解决你的问题，你可以看下
• 除此之外, 这篇博客: vue中的鼠标事件的总结中的 2. @mousedown() / @mouseup() 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 按下触发 / 抬起触发