我已经在Javascript中编写了一个拖放脚本,我的目标是尽可能提高效率(光标位于抓取的确切位置并且没有滞后峰值)你通常会尝试限制你的移动功能被触发的次数(限制鼠标移动事件),但我尝试了其他一些方法,我不确定它是否真的在做我所做的事情。我期待着。
这就是我处理它的方式;
首先,在mousedown上,requestAnimationFrame循环启动
var handleMovement = function(){
self.ele.style.top = self.dragElPos.pageTop+'px';
self.ele.style.left = self.dragElPos.pageLeft+'px';
self.animFrame = requestAnimationFrame(handleMovement);
}
其次,mousemove事件调用此函数
var setCoordinates = function (e) {
self.dragElPos.pageTop = (e.pageY-self.dragElPos.innerTop);
self.dragElPos.pageLeft = (e.pageX-self.dragElPos.innerLeft);
}
所有这一切都是将位置存储在某个对象中,handleMovement()函数会检索它,并且由于动画循环,元素会被移动。
我期待的行为是requestAnimationFrame正在优化循环以便动画顺利运行,但由于坐标是由其他一些函数设置的,我想知道它是否知道它何时被优化。
它看起来非常流畅,但如果没有进行优化,我宁愿使用鼠标移动限制。
P.S。浏览器兼容性无关紧要。