象棋拖拽开发：如何跨函数作用域引用并操控目标棋子对象？

核心问题在于你没有正确保存触发mousedown的棋子元素，同时cursor变量的作用域和事件参数的处理也存在问题。下面是修正后的完整代码及关键改动说明：

修正后的代码 #

<div id='gameBoard'></div>

// 全局变量保存当前拖拽的棋子和光标位置
let currentDraggingPiece = null;
let cursor = { x: 0, y: 0 };

// 棋盘与棋子创建
const board = document.getElementById('gameBoard');
const newSquare = document.createElement('div');
const newPiece = document.createElement('div');

// 给棋子添加基础定位样式（必须设置absolute才能通过left/top调整位置）
newPiece.style.position = 'absolute';
newPiece.style.width = '50px';
newPiece.style.height = '50px';
newPiece.style.backgroundColor = '#ccc';
newPiece.style.cursor = 'move';

newPiece.addEventListener('mousedown', mouseDown, false);
newSquare.appendChild(newPiece);
board.appendChild(newSquare);

// 修正光标位置获取：更新全局cursor变量
function getCursorPos(e) {
  cursor.x = e.pageX - board.offsetLeft;
  cursor.y = e.pageY - board.offsetTop;
}

// 鼠标按下时，保存当前拖拽的棋子
function mouseDown(e) {
  // 通过事件对象拿到触发mousedown的棋子元素
  currentDraggingPiece = e.target;
  window.addEventListener('mousemove', movePiece, true);
}

// 鼠标松开时，移除监听并清空当前拖拽标记
function mouseUp() {
  window.removeEventListener('mousemove', movePiece, true);
  currentDraggingPiece = null;
}

// 移动棋子：直接引用全局变量操作目标元素
function movePiece() {
  if (currentDraggingPiece) {
    // 可选：让光标对准棋子中心，提升拖拽体验
    const offsetX = currentDraggingPiece.offsetWidth / 2;
    const offsetY = currentDraggingPiece.offsetHeight / 2;
    currentDraggingPiece.style.left = `${cursor.x - offsetX}px`;
    currentDraggingPiece.style.top = `${cursor.y - offsetY}px`;
  }
}

board.addEventListener('mousemove', getCursorPos, true);
window.addEventListener('mouseup', mouseUp, false);

关键改动说明 #

• 保存拖拽目标：在mouseDown中通过e.target获取触发事件的棋子，存入全局变量currentDraggingPiece，让movePiece能直接引用操作。
• 修正变量作用域：把cursor设为全局变量，确保getCursorPos更新的位置能被movePiece读取到。
• 补全定位样式：棋子必须设置position: absolute，否则left和top样式不会生效。
• 拖拽体验优化：调整位置时减去棋子自身宽高的一半，让光标始终对准棋子中心，符合用户直觉。
• 可选扩展：如果需要限制棋子在棋盘内移动，可以在movePiece中添加坐标范围判断，比如确保left不小于0且不超过棋盘宽度减去棋子宽度。

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