jQuery Sortable单可拖拽行无法与不可拖拽行调换位置求助

我有一个包含两行的表格：

<table id='table'>
     <tr class="no-drag"><td>row 1</td></tr>
     <tr class="sortable"><td>row 2</td></tr>
</table>

通过以下代码启用排序功能：

$('#table').sortable( {
    items: 'tr:not(.no-drag)',
    handle: 'td',
    cursor: 'pointer',
    cancel: '.no-drag',
    axis: 'y'
});

问题：即使只有一个可拖拽项，拖拽时该行视觉上会移动，但松开后并未移动到不可拖拽行的前后位置。

核心问题是单个可拖拽项时，jQuery UI Sortable无法正确识别相对于不可拖拽元素的放置位置，可通过以下步骤解决：

1. 添加占位符CSS样式：确保拖拽时的占位符有可见尺寸，让Sortable能正确识别放置区域

.ui-sortable-placeholder {
    visibility: visible !important;
    height: 30px !important;
    background-color: #eee;
}

2. 修改Sortable配置：启用强制占位符尺寸，并在停止拖拽时手动调整元素位置

$('#table').sortable({
    items: 'tr:not(.no-drag)',
    handle: 'td',
    cursor: 'pointer',
    cancel: '.no-drag',
    axis: 'y',
    // 强制占位符生成实际尺寸，避免因无其他可拖拽项导致无法识别位置
    forcePlaceholderSize: true,
    placeholder: 'ui-sortable-placeholder',
    stop: function(event, ui) {
        const $draggedRow = ui.item;
        const $noDragRow = $('.no-drag', this);
        
        if ($noDragRow.length) {
            const noDragRowTop = $noDragRow.offset().top;
            // 判断拖拽元素的位置相对于不可拖拽行的顶部
            if (ui.offset.top < noDragRowTop) {
                // 拖拽到不可拖拽行上方，插入到其前面
                $draggedRow.insertBefore($noDragRow);
            } else {
                // 拖拽到不可拖拽行下方，插入到其后面
                $draggedRow.insertAfter($noDragRow);
            }
        }
    }
});

原理说明：

• forcePlaceholderSize: true 让占位符拥有实际高度，确保拖拽时能显示明确的放置位置
• stop 事件中通过对比拖拽元素和不可拖拽行的位置，手动调整DOM结构，确保松开后元素停留在目标位置

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