javascript - js 原生拖拽还是跟不上鼠标(速度不快)？

Question

Electron + vue3 + vite

置顶补充:
我用在线的编辑器试了下:
https://codepen.io/ZeronoFreya/pen/vYQZZmw

应该不是我的代码有问题……orz

这更不知道该怎么搞了啊

---

function dragFiles(e){
    window.requestAnimationFrame(() => {
        fileDragEl.value.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
    })
}
filesBox.setPointerCapture(e.pointerId)
filesBox.addEventListener("pointermove", dragFiles, false)
filesBox.addEventListener("pointerup", dragFilesEnd, false)

fileDragEl 的全部样式:

.file_drag_prev {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background: gold;
    transform: translate(-100%, 0);
    img{
        width:100%;
        height: 100%;
        object-fit: contain;
    }
}

基本就这些，效果如图:

鼠标速度并不快，但就是跟不上，为了防止鼠标脱离使用了pointermove，应该不是它的原因吧？但就算是也得用它……Orz

补充: 从控制台可以看到transform更新了每一个像素的变动，是动画执行的太频繁导致的吗？

大家有什么建议吗？
谢谢。

补充: 直接绑定:

document.addEventListener("mousemove", function({clientX, clientY}){
    fileDragPrevEl.value.style.transform = `translate(${clientX}px, ${clientY}px)`
}, false)

---

为了避免其他的影响，已隐藏全部组件:

可以看到,除了file_drag_prev没别的了

难以理解啊……

Answer 1

我做了个测试效果，虽然有一点延迟，几乎不影响。

测试效果

Answer 2

function dragFiles(e){
    fileDragEl.value.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
}


css

.file_drag_prev {
    /* 其他样式 */
    transition: transform 0.1s;
}

Answer 3

requestAnimationFrame 是代替setinterval和setTimeout 能够更准确且不浪费资源的情况下的完成动画效果，你这里用它多次一举，他会按帧数执行命令。拖动直接改变dom位置就行了，像这样：

filesBox.addEventListener("pointermove", ()=>{
    filesBox.style.left=window.event.clientX + 'px'
    filesBox.style.top=window.event.clientY + 'px'
}, false)

Answer 4

看起来你是给跟随鼠标运动的那个dom加了transition