如何借助jQuery UI Sortable的helper保持表格行的尺寸比例

我之前也碰到过类似的表格拖拽尺寸变形的问题，你的helper思路是对的，但之前的实现没考虑到盒模型（padding、border）和上下文样式继承的问题，导致拖拽时输入框等元素收缩。试试下面的优化方案：

核心改进点 #

• 使用outerWidth(true)获取单元格的完整宽度（包含padding、border、margin），而非仅内容宽度
• 让克隆的helper行继承原表格的总宽度，避免整体收缩
• 强制单元格内的表单元素宽度为100%，继承单元格尺寸
• 添加自定义样式确保helper的视觉一致性

修改后的完整代码 #

CSS 部分（添加到你的样式文件中）

/* 自定义拖拽helper的样式，避免视觉错乱 */
.sortable-helper {
    display: table-row;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.sortable-helper td {
    border: none;
    vertical-align: middle;
}

JavaScript 部分（更新Sortable配置）

$(function() {
    $(".table #bodyAliniacion").sortable({
        cursor: 'pointer',
        placeholder: "placeholder",
        forcePlaceholderSize: true,
        axis: 'y',
        dropOnEmpty: false,
        // 优化后的helper函数
        helper: function(e, tr) {
            // 克隆原表格行
            const $helper = tr.clone();
            // 获取原表格的总宽度，确保helper和表格同宽
            const tableTotalWidth = tr.closest('table').width();
            $helper.css('width', tableTotalWidth);
            
            // 遍历每个单元格，同步精确尺寸
            tr.children().each(function(index) {
                const $originalCell = $(this);
                // 获取单元格的完整宽度（含padding、border、margin）
                const cellFullWidth = $originalCell.outerWidth(true);
                // 给helper的单元格设置相同的宽度
                $helper.children().eq(index).outerWidth(cellFullWidth);
                // 强制表单元素宽度100%，继承单元格尺寸
                $helper.children().eq(index).find('input, select').css('width', '100%');
            });
            
            // 添加自定义类方便样式控制
            $helper.addClass('sortable-helper');
            return $helper;
        },
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
            $(this).find("tr").each(function (index) {
                let idFila = this.id;
                // 保留你原有的排序逻辑
                // if (idFila !== undefined){
                // $("#ordenJugador-"+this.id.split("-")[1]).val(index+1);
                // }
            });
        }
    });
});

为什么原来的方法失效？ #

1. 你之前用的width()仅获取单元格的内容宽度，没有包含padding和border，导致helper的单元格比原单元格窄
2. 克隆的元素脱离了原表格的上下文，Bootstrap的form-control样式在非表格环境下会改变默认宽度
3. 没有设置helper行的总宽度，导致整体布局收缩

这样修改后，拖拽时的helper就能完全匹配原行的尺寸，输入框和其他元素也不会变形了。

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