jQuery拖拽功能异常：元素放置位置随机偏移问题排查

核心问题及修复步骤 #

• 重复绑定拖拽事件引发逻辑冲突
  每次调用insertCharacter都会给所有.character和.grid-cell重新绑定拖拽/放置事件，多次绑定后会导致拖拽行为混乱，出现随机偏移。

  修复方式：把拖拽初始化移到$(document).ready()里只执行一次，新添加的棋子单独绑定拖拽：

  $(document).ready(function() {
      // 原有表格监听、网格生成代码保持不变
  
      // 一次性初始化所有网格单元格的放置功能
      $('.grid-cell').droppable({
          accept: '.character',
          drop: function(event, ui) {
              var character = ui.draggable;
              // 清空拖拽产生的动态位置样式，恢复默认居中
              character.css({top: '', left: ''}).appendTo($(this)); 
          }
      });
  });
  
  // 修改insertCharacter，移除重复的全局拖拽绑定
  function insertCharacter(nickname, hp) {
      var cells = $('.grid-cell');
      cells.each(function() {
          if (!$(this).children('.character').length) {
              const $char = $('<div class="character" data-hp="' + hp + '">' + nickname + '<br>' + hp + '</div>');
              $(this).append($char);
              // 给新生成的棋子单独绑定拖拽
              $char.draggable({
                  revert: 'invalid',
                  zIndex: 100,
                  start: function() {
                      $(this).css('cursor', 'pointer');
                  },
                  stop: function() {
                      $(this).css('cursor', 'auto');
                  }
              });
              return false; 
          }
      });
  }
  

• 绝对定位样式残留导致位置错乱
  .character默认有top:10px; left:10px，但拖拽时jQuery UI会给元素添加动态计算的top/left内联样式，放置后这些样式不会自动清除，导致棋子偏移。

  修复方式：在drop事件中清空棋子的内联位置样式，让它继承CSS里的默认定位：

  drop: function(event, ui) {
      var character = ui.draggable;
      character.css({top: '', left: ''}).appendTo($(this)); 
  }
  

• 网格布局尺寸计算错误
  .grid-cell的width:50px加上border:1px，实际宽高是52px，而.gridframe只有300px宽，10个单元格总宽度超过容器，会导致布局换行或截断，干扰拖拽位置判断。

  修复方式：给单元格加box-sizing: border-box，让边框包含在设定的尺寸内：

  .grid-cell {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
      position: relative;
      float: left;
      box-sizing: border-box; /* 新增这行 */
  }
  

• 可选：强制拖拽后棋子居中
  如果还是有偏移，可以在drop时直接指定棋子的位置，确保居中：

  drop: function(event, ui) {
      var character = ui.draggable;
      character.appendTo($(this)).css({
          top: '10px',
          left: '10px'
      });
  }
  

额外小问题修复 #

• 原代码里有两个</style>标签，属于语法错误，删掉多余的那个

内容的提问来源于stack exchange，提问作者Scarlet D.