React/JavaScript实现国际象棋拖拽移动后棋子偏移问题求助

核心原因 #

拖拽时直接用鼠标视口坐标设置棋子位置，会以棋子左上角为定位基准而非中心，导致放置后与方格中心偏移；另外没考虑鼠标在棋子内的相对位置，也会加剧偏移问题。

具体修复步骤 #

• 记录鼠标相对棋子的偏移
  在dragstart事件里，计算鼠标点击位置到棋子左上角的偏移量，后续用来修正放置坐标：

  const handleDragStart = (e) => {
    const rect = e.target.getBoundingClientRect();
    e.dataTransfer.setData('offsetX', e.clientX - rect.left);
    e.dataTransfer.setData('offsetY', e.clientY - rect.top);
  };
  

• 计算精准的放置坐标
  在drop事件中，结合目标方格的位置和之前记录的偏移量，让棋子中心与方格中心对齐：

  const handleDrop = (e) => {
    e.preventDefault();
    const offsetX = parseInt(e.dataTransfer.getData('offsetX'));
    const offsetY = parseInt(e.dataTransfer.getData('offsetY'));
    const squareRect = e.currentTarget.getBoundingClientRect();
    
    // 方格中心位置 - 鼠标在棋子内的偏移 = 棋子左上角应处的位置
    const pieceLeft = squareRect.left + (squareRect.width / 2) - offsetX;
    const pieceTop = squareRect.top + (squareRect.height / 2) - offsetY;
    
    // 更新棋子状态中的位置
    setPiecePosition({ left: pieceLeft, top: pieceTop });
  };
  

• 确保定位基准正确
  棋盘容器设为相对定位，棋子设为绝对定位，保证left/top的计算基准是棋盘而非整个视口：

  .chess-board {
    position: relative;
  }
  .chess-piece {
    position: absolute;
    width: 100%; /* 或固定宽高，需与方格尺寸匹配 */
    height: 100%;
  }
  

• 处理拖拽覆盖事件
  在方格的dragover事件中必须阻止默认行为，否则drop事件无法触发：

  const handleDragOver = (e) => {
    e.preventDefault();
  };
  

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