jQuery Sortable拖动不同高度表格行时占位符不显示问题求助

你的问题核心是：首次拖动包含子表格的行时，Sortable的助手（helper）和占位符（placeholder）高度基于原行（含展开的子表格）计算，即便在start事件里隐藏了子表格，此时助手和占位符的高度已确定，导致拖动到中间位置时占位符无法正常显示。

修复方案一：在start事件中强制同步高度 #

修改start回调函数，先获取隐藏子表格后的行高度，再手动同步给助手和占位符：

$('#table').sortable({
  items: '> tbody > tr',
  handle: 'td:not(.no-drag)',
  cursor: 'pointer',
  cancel: '.no-drag',
  axis: 'y',
  dropOnEmpty: false,
               
  start: function (e, ui) {
    const $subTable = ui.item.find('table');
    // 先隐藏子表格
    $subTable.hide();
    // 获取当前行的实际高度（已隐藏子表格）
    const targetHeight = ui.item.height();
    // 强制设置助手和占位符的高度为目标高度
    ui.helper.height(targetHeight);
    ui.placeholder.height(targetHeight);
  },

  stop: function (ev, ui) {
    ui.item.find('table').show();
  }
});

修复方案二：自定义助手提前处理子表格 #

通过helper函数在创建助手时就隐藏子表格，从根源避免高度计算错误：

$('#table').sortable({
  items: '> tbody > tr',
  handle: 'td:not(.no-drag)',
  cursor: 'pointer',
  cancel: '.no-drag',
  axis: 'y',
  dropOnEmpty: false,
  // 自定义助手：克隆原行并提前隐藏子表格
  helper: function(e, item) {
    const $helper = $(item).clone();
    $helper.find('table').hide();
    return $helper;
  },
               
  start: function (e, ui) {
    ui.item.find('table').hide();
    // 同步原行与助手的高度
    ui.item.height(ui.helper.height());
    ui.placeholder.height(ui.helper.height());
  },

  stop: function (ev, ui) {
    ui.item.find('table').show();
    ui.item.height('auto'); // 恢复自动高度
  }
});

原理说明 #

Sortable在触发start事件前，已完成助手和占位符的创建，它们的高度默认继承原元素的初始高度（含展开的子表格）。即便在start里隐藏子表格，助手的高度也不会自动更新，导致拖动时占位符位置计算偏差，只有拖动距离超过原高度时，Sortable才会重新计算位置。上述方案通过提前修正助手和占位符的高度，让Sortable能正确识别放置区域。

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