空表格无法接收拖拽行异常问题排查与修复请求

问题描述 #

使用jQuery UI实现table1、table2两个表格间的行拖拽互移功能，当将table1的所有行全部移至table2后，无法再将table2中的行拖拽回table1，报错提示Cannot move row to the table without row。

核心问题原因 #

1. 空表格索引判断失效：当目标表格（如被移空的table1）的tbody无任何行时，$(this).children().index(ui.helper)会返回-1，原代码未处理该值，导致后续插入逻辑全部无法触发，无法将行插入空表格。
2. HTML语法错误：table2的tbody闭合标签写错为</<tbody>，导致DOM结构异常，影响拖拽逻辑的元素查找。
3. 无效代码残留：原JS代码末尾存在未完成的re语句，属于无效代码。

修复方案 #

步骤1：修正HTML语法错误 #

将table2的tbody闭合标签修正为正确的</tbody>。

步骤2：优化JS拖拽逻辑 #

• 增加空表格判断：当目标tbody无任何子元素时，直接将拖拽行追加到tbody中。
• 修正索引判断逻辑，处理droppableRowIndex === -1的边界情况。
• 移除无效的re语句。
• 动态绑定拖拽事件，确保行移动后仍保持可拖拽状态。

修复后的完整代码 #

HTML部分

<div id="table1" class="bitacoratable">
  <table id="table1" class="childgrid">
    <tbody>
      <tr class="draggable_tr">
        <td>1</td>
        <td>Student 1</td>
      </tr>
      <tr class="draggable_tr">
        <td>2</td>
        <td>Student 2</td>
      </tr>
      <tr class="draggable_tr">
        <td>3</td>
        <td>Student 3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="table2" class="bitacoratable">
  <table id="table2" class="childgrid">
    <tbody>
      <tr class="draggable_tr">
        <td>6</td>
        <td>Student 6</td>
      </tr>
      <tr class="draggable_tr">
        <td>7</td>
        <td>Student 7</td>
      </tr>
      <tr class="draggable_tr">
        <td>8</td>
        <td>Student 8</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript部分

$(function() {
  // 动态绑定拖拽事件，确保移动后的行仍可拖拽
  $(document).on('mouseover', '.draggable_tr', function() {
    $(this).draggable({
      helper: 'clone',
      revert: 'invalid'
    });
  });

  $('.childgrid tbody').droppable({
    drop: function(event, ui) {
      var draggableRow = ui.draggable;
      var draggableTable = draggableRow.closest('.childgrid');
      var droppableTbody = $(this);
      var droppableTable = droppableTbody.closest('.childgrid');
      var droppableRowIndex = droppableTbody.children().index(ui.helper);
      var draggableRowIndex = draggableTable.find('tbody').children().index(draggableRow);

      // 跨表格拖拽逻辑
      if (droppableTable.attr('id') !== draggableTable.attr('id')) {
        draggableRow.remove();
        
        // 处理目标tbody为空的情况
        if (droppableTbody.children().length === 0) {
          droppableTbody.append(draggableRow);
        } else if (droppableRowIndex === 0) {
          droppableTbody.prepend(draggableRow);
        } else if (droppableRowIndex === droppableTbody.children().length - 1) {
          droppableTbody.append(draggableRow);
        } else {
          droppableTbody.children().eq(droppableRowIndex).before(draggableRow);
        }
      } 
      // 同表格内拖拽排序逻辑
      else if (droppableRowIndex !== draggableRowIndex) {
        if (droppableRowIndex === 0) {
          droppableTbody.prepend(draggableRow);
        } else if (droppableRowIndex === droppableTbody.children().length - 1) {
          droppableTbody.append(draggableRow);
        } else if (droppableRowIndex > draggableRowIndex) {
          droppableTbody.children().eq(droppableRowIndex).after(draggableRow);
        } else {
          droppableTbody.children().eq(droppableRowIndex).before(draggableRow);
        }
      }
    }
  });
});

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