JavaScript实现HTML元素拖拽：桌面端功能异常求助

问题根源 #

• 瞬移现象：原代码在拖拽时，每次用元素当前的offsetTop/offsetLeft叠加鼠标从初始位置到当前位置的总位移，导致位移被反复叠加，直接瞬移到异常位置。正确逻辑应该是记录鼠标相对于元素自身的偏移量，用鼠标当前位置减去偏移量得到元素新位置。
• mouseup不触发：原代码把mouseup绑定在元素本身上，当鼠标移出元素再松开时，元素接收不到事件；另外用bind(this)绑定的elementDrag函数，移除事件时找不到对应引用，导致拖拽停不下来。
• 额外冲突：HTML中给.Character加了draggable='true'，会触发浏览器默认拖拽行为，干扰自定义拖拽逻辑。

修复后的代码 #

JavaScript代码

var elements = document.querySelectorAll('.Character');

// 遍历绑定拖拽事件
for (var i = 0; i < elements.length; i++) {
  var character = elements[i];
  character.addEventListener("touchmove", dragTouch);
  character.addEventListener("mousedown", dragMouseDown);
}

function dragTouch(e) {
  e.preventDefault(); // 阻止默认触摸滚动行为
  var touchLocation = e.targetTouches[0];
  var offsetX = this.offsetWidth / 2;
  var offsetY = this.offsetHeight / 2;
  this.style.left = (touchLocation.clientX - offsetX) + "px";
  this.style.top = (touchLocation.clientY - offsetY) + "px";
}

function dragMouseDown(e) {
  e.preventDefault(); // 阻止默认选中文本行为
  // 记录鼠标相对于元素左上角的偏移量
  const elemRect = this.getBoundingClientRect();
  const offsetX = e.clientX - elemRect.left;
  const offsetY = e.clientY - elemRect.top;

  // 定义拖拽中/结束的处理函数，确保移除时能找到引用
  const moveHandler = (e) => {
    this.style.left = (e.clientX - offsetX) + "px";
    this.style.top = (e.clientY - offsetY) + "px";
  };
  const upHandler = () => {
    document.removeEventListener("mousemove", moveHandler);
    document.removeEventListener("mouseup", upHandler);
  };

  // 绑定到document，确保鼠标移出元素也能触发结束事件
  document.addEventListener("mousemove", moveHandler);
  document.addEventListener("mouseup", upHandler);
}

HTML调整（PHP生成部分）

移除draggable='true'属性：

// 原代码
$html = "<div class='Character'draggable='true' $style>$charName</div>";
// 修改后
$html = "<div class='Character' $style>$charName</div>";

CSS代码（无需修改）

.Character {
  position: absolute;
  z-index: 9;
  background-color: #50a581;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  left: 10px;
  top: 10px;
}

#mapContainer {
  position: relative;
  background-image: url(./../images/maps/dragons_rest_Dragons_rest.jpeg); 
  background-repeat: no-repeat;
  background-position: top center;
  height: 90vh;
  background-size: contain;
  max-width: 100%;
  max-height: 100%;
}

核心修复点 #

1. 改用鼠标相对于元素的偏移量计算位置，彻底解决瞬移问题
2. 将鼠标事件绑定到document上，确保鼠标移出元素后仍能触发结束事件
3. 在事件内部定义处理函数，保证移除事件时能准确匹配引用
4. 增加preventDefault()阻止浏览器默认行为，避免拖拽被干扰
5. 移除draggable属性，消除默认拖拽与自定义逻辑的冲突

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