使用JavaScript鼠标事件拖动DIV会快速移动

Question

我试图在图片上移动#frame-slider-thumb。我通过跟踪mouseX位置中的diff来实现它。但问题是，如果拇指不是0开始，它会跳回到0.因此，我在逻辑中添加了curr变量，以便从当前位置添加diff。现在它移动得很快。我不知道为什么。任何帮助非常感谢。 Heres a codepen.

HTML

<div id="frame-slider">
  <img id="frame-slider-background" src="http://imagej.1557.x6.nabble.com/file/n5009735/OCT_pre_segmented.png" alt="" />
  <div id="frame-slider-track">
    <div id="frame-slider-thumb">
      <div class="top-half"></div>
      <div class="bottom-half"></div>
    </div>
  </div>
</div>

JS

var mouseStartPosition = {};
var thumb = document.getElementById('frame-slider-thumb');
window.addEventListener("mousedown", mousedownThumb);

function mousedownThumb(e) {
  mouseStartPosition.x = e.pageX;
  // add listeners for mousemove, mouseup
  window.addEventListener("mousemove", mousemoveThumb);
  window.addEventListener("mouseup", mouseupThumb);
}

function mousemoveThumb(e) {
  var curr = isNaN(parseFloat(thumb.style.left)) ? 0 : parseFloat(thumb.style.left);
  var diff = -1 * (mouseStartPosition.x - e.pageX);
  var newLeft = curr + diff;
  thumb.style.left = newLeft + 'px';
}

function mouseupThumb(e) {
  window.removeEventListener("mousemove", mousemoveThumb);
  window.removeEventListener("mouseup", mouseupThumb);
}

CSS

html,
body {
  width: 100%;
  height: 100%;
}

#frame-slider {
  height: 150px;
  width: 50%;
  position: relative;
}

#frame-slider-background {
  width: 100%;
  max-height: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

#frame-slider-track {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}

#frame-slider-thumb {
  position: absolute;
  left: 0;
  margin-left: -4px;
  width: 8px;
  height: 100%;
  cursor: pointer;
}

#frame-slider-thumb .top-half {
  background-color: rgba(0, 0, 255, 0.7);
  height: 50%;
}

#frame-slider-thumb .bottom-half {
  background-color: rgba(255, 0, 0, 0.7);
  height: 50%;
}

Answer 1

通过向mousedownThumb添加thumbStart位置来修复。基本上diff不是上一次mousemove事件的位置差异，它与上一次mousemove事件和mousedown事件的区别。

var mouseStartPosition = {};
var thumbStart;
var thumb = document.getElementById('frame-slider-thumb');
window.addEventListener("mousedown", mousedownThumb);

function mousedownThumb(e) {
  mouseStartPosition.x = e.pageX;
  thumbStart = isNaN(parseFloat(thumb.style.left)) ? 0 : parseFloat(thumb.style.left);

  // add listeners for mousemove, mouseup
  window.addEventListener("mousemove", mousemoveThumb);
  window.addEventListener("mouseup", mouseupThumb);
}

function mousemoveThumb(e) {
  var diff = -1 * (mouseStartPosition.x - e.pageX);
  var newLeft = thumbStart + diff;
  thumb.style.left = newLeft + 'px';
}

function mouseupThumb(e) {
  window.removeEventListener("mousemove", mousemoveThumb);
  window.removeEventListener("mouseup", mouseupThumb);
}