那里!我在让 #drag 元素平滑移动方面遇到了问题。

我看这篇文章:http://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-mouse-events

它说:“移动元素时 mousemove 事件的问题是 mousemove 事件触发过多

所以，我尝试使用他们的方法:使用 requestAnimationFrame + boolean checking。

看看这个 fiddle 的现场表演:https://jsfiddle.net/5f181w9t/

HTML:

<div id="drag">this is draggable</div>

CSS:

#drag {width:100px; height:50px; background-color:red; transform:translate3d(0, 0, 0); }

JS:

var el               = document.getElementById("drag"),
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false; // check if mouse is down or not 

function mouseDown(e) {
    e.preventDefault(); // reset default behavior
    isMouseDown     = true;
    startPosition   = e.pageX; // get position X
    currentPosition = getTranslateX(); // get current translateX value
    requestAnimationFrame(update); // request 60fps animation
}    

function mouseMove(e) {
    e.preventDefault();
    distancePosition = (e.pageX - startPosition) + currentPosition; // count it!  
}

function mouseUp(e) {
    e.preventDefault();
    isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
   var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);

   return translateX; // get translateX value

}

function update() {
    if (isMouseDown) { // check if mouse is down
        requestAnimationFrame(update); // request 60 fps animation
    }
    el.style.transform = "translate3d(" + distancePosition + "px, 0, 0)";
  // move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

这是完成它的正确方法吗？

我的代码有什么问题？

谢谢

最佳答案

问题是您在 mouseDown 事件监听器中使用了 requestAnimationFrame()。您应该在 mouseMove 事件监听器中进行所有更新，因为您希望在鼠标移动时而不是在鼠标单击时更新显示。因此，您应该在 update 函数中根据 isMouseDown 条件更新所有变量。我建议按如下方式更正代码。

HTML

<div id="drag">this is draggable</div>

CSS

#drag {
width:100px;
height:50px;
background-color:red;
transform:translateX(0);
}

JS

var el               = drag,
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false, // check if mouse is down or not
    needForRAF       = true;  // to prevent redundant rAF calls

function mouseDown(e) {
  e.preventDefault(); // reset default behavior
  isMouseDown     = true;
  currentPosition = getTranslateX(); // get current translateX value
  startPosition   = e.clientX; // get position X
}    

function mouseMove(e) {
    e.preventDefault();
  distancePosition = (e.clientX - startPosition) + currentPosition; // count it!  
  if (needForRAF && isMouseDown) {
    needForRAF = false;            // no need to call rAF up until next frame
    requestAnimationFrame(update); // request 60fps animation
  }; 
}

function mouseUp(e) {
  e.preventDefault();
  isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
  var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);
  return translateX; // get translateX value
}

function update() {
  needForRAF = true; // rAF now consumes the movement instruction so a new one can come
  el.style.transform = "translateX(" + distancePosition + "px)";// move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

检查一下 here

关于Javascript 移动元素与 mousemove 事件 60 FPS requestAnimationFrame，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36098039/