JavaScript鼠标事件异常：拖拽dragItem元素行为不符合预期

需求描述 #

实现id为dragItem的div元素水平移动：当鼠标光标位于class为tag的div上方时，调整dragItem的位置。

问题现象 #

功能基本可用，但存在异常：

• 在与起始拖动位置不同的水平行释放鼠标后，再次点击dragItem，释放鼠标前无法看到元素移动。
• 释放鼠标后仍能拖动dragItem。
• 先点击屏幕其他位置再操作dragItem，功能可正常工作。

代码示例 #

JavaScript代码 #

dragItem = document.getElementById("dragItem")

dragItem.addEventListener('mousedown', dragMouseDownHandler)

mouseIsDown = false;

function dragMouseDownHandler(event) {
  if (!mouseIsDown) {
    mouseIsDown = true;
    document.addEventListener('mousemove', mouseMove)
    document.addEventListener('mouseup', mouseUp)
  }
}

function mouseMove(event) {
  var elementsUnderMouse = document.elementsFromPoint(event.clientX, event.clientY);

  elementsUnderMouse.forEach(element => {
    if (element.classList.contains("tag")) {
      vonLinks = element.offsetLeft
      dragItem.style.left = vonLinks + 'px'
    }
  })
}


function mouseUp(event) {
  mouseIsDown = false;
  document.removeEventListener('mousemove', mouseMove)
  document.removeEventListener('mouseup', mouseUp)
}

CSS代码 #

#moveArea {
  width: 600px;
  height: 600px;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.tag {
  height: 110px;
  width: 110px;
  background-color: #b3d4fc;
  border: 1px solid black;
}

#dragItem {
  height: 100px;
  width: 100px;
  background-color: lightcoral;
  position: fixed;
}

HTML代码 #

<div id="moveArea">
  <div class="row">
    <div class="tag">
      <div id="dragItem"></div>
    </div>
    <div class="tag"></div>
    <div class="tag"></div>
    <div class="tag"></div>
  </div>
  <div class="row">
    <div class="tag"></div>
    <div class="tag"></div>
    <div class="tag"></div>
    <div class="tag"></div>
  </div>
</div>

异常原因分析 #

1. 浏览器默认行为干扰：未在mousedown事件中阻止默认行为，拖动时浏览器会触发原生的元素拖拽/文本选择行为，导致mouseup事件无法被正确捕获，mouseIsDown状态未被重置，mousemove和mouseup事件监听未被移除，后续操作时状态混乱。

2. 位置计算逻辑错误：dragItem是fixed定位（相对于视口），但代码中使用element.offsetLeft获取tag相对于父元素（row）的偏移量来设置left值，导致dragItem的位置与预期不符，进一步引发事件触发异常。

修复方案 #

调整后的JavaScript代码 #

const dragItem = document.getElementById("dragItem")
let mouseIsDown = false;

dragItem.addEventListener('mousedown', dragMouseDownHandler)

function dragMouseDownHandler(event) {
  event.preventDefault(); // 阻止默认拖拽行为
  if (!mouseIsDown) {
    mouseIsDown = true;
    document.addEventListener('mousemove', mouseMove)
    document.addEventListener('mouseup', mouseUp)
  }
}

function mouseMove(event) {
  const elementsUnderMouse = document.elementsFromPoint(event.clientX, event.clientY);

  elementsUnderMouse.forEach(element => {
    if (element.classList.contains("tag")) {
      const viewportLeft = element.getBoundingClientRect().left; // 获取相对于视口的left值
      dragItem.style.left = `${viewportLeft}px`;
    }
  })
}

function mouseUp() {
  mouseIsDown = false;
  document.removeEventListener('mousemove', mouseMove)
  document.removeEventListener('mouseup', mouseUp)
}

关键修改点 #

• 添加event.preventDefault()阻止浏览器默认拖拽行为，确保自定义事件正常触发。
• 使用element.getBoundingClientRect().left替代offsetLeft，获取tag相对于视口的准确位置，匹配fixed定位的坐标规则。
• 使用const/let声明变量，避免隐式全局变量导致的状态污染。

内容的提问来源于stack exchange，提问作者CodeCannibal