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

Dragging DIV with JavaScript mouse events moves to quickly

本文关键字：移动 DIV 拖动 JavaScript 鼠标 事件 使用      更新时间：2023-09-26

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

.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%;
}

通过向鼠标向下拇指添加拇指起始位置来修复。基本上diff不是与上一个鼠标移动事件的位置差异，而是与上一个鼠标移动事件和鼠标按下事件的不同。

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);
}
相关文章：