Question

尝试使div可拖动，但仅沿x轴，可以左右拖动视频控件上的时间戳拇指以通过视频或音频演示进行搜索。

这是我的代码

  thumb.addEventListener('mousemove', updateThumbPosition, false)

  function updateThumbPosition (event) {
    var thumbRect = thumb.getBoundingClientRect()
    var startX = seekbar.getBoundingClientRect().left
    var mouseX = event.clientX
    console.log(mouseX - startX + thumbRect.width / 2)
    thumb.style.transform = 'translateX(' + mouseX - startX + thumbRect.width / 2 + 'px)'
  }

div不动。鼠标移动时，值会快速变化。我可以看到，当我登录到控制台时，但div本身不会沿X轴平移。想法？

这是一个jsfiddle：https://jsfiddle.net/btjLqa8u/1/

Answer 1

您只是缺少括号：https://jsfiddle.net/rjzLtunb/

 div.style.transform = 'translateX(' + (mouseX - startX) + 'px)'

顺便说一下，对于拖放代码，你可能想要在div父级而不是div本身上监听鼠标移动。

Answer 2

我更新了你更好的鼠标操作。

的jsfiddle

s4mj3ch9

var div = document.getElementById('div')

div.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function updateDivPosition (event) {
  var divRect = div.getBoundingClientRect()
  var startX = seekbar.getBoundingClientRect().left
  var mouseX = event.clientX
  div.style.transform = 'translateX(' + (mouseX - startX) + 'px)'
}
function mouseUp(){
    window.removeEventListener('mousemove', updateDivPosition, true);
}
function mouseDown(){
  window.addEventListener('mousemove', updateDivPosition, true);
}

在mousemove上应用JavaScript转换不会动态更新

2 个答案: