多单元格表格行拖拽排序失效问题求助

看起来你遇到的核心问题是HTML表格结构错误，导致jQuery UI Sortable无法正确识别可排序的行组。让我一步步帮你解决：

问题根源 #

看你的PHP代码，你在循环中每次输出一个完整的<table>标签，每个表格里只有一行<tr>。这意味着所有要排序的行都属于不同的表格容器，jQuery UI Sortable没办法跨表格进行排序，所以拖拽后行会自动回到原来的位置。

解决方案步骤 #

1. 修复表格HTML结构 #

把所有行放在同一个<table>的<tbody>中，而不是每个行单独一个表格。调整你的PHP代码结构：

// 先输出表单和表格的开头部分，放在循环外面
echo '<form id="formName" action="" method="post" enctype="multipart/form-data"> 
<table class="draganddrop" width="980" cellspacing="20" style="font-family:arial; font-size:20px;">
<tbody>';

// 这里是你的数据循环（比如while/foreach）
while($row = /* 你的数据库查询结果 */) {
    // 计算$checksum等变量...
    echo '<tr> 
    <td width="20" valign="top"><input type="image" formaction="print-delete.php?id='.$row['id'].'" width="20" height="20" src="/megrendelesek/images/print.svg"></td> 
    <td style="font-weight:bold; color: '.${'tablerow'.$row['id']}.'" width="105" valign="top" align="center" >'.$row["atveheto"].'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="120" valign="top" >'.$row["megrendelo"].'</td> 
    <td style="font-weight:bold; color: '.${'tablerow'.$row['id']}.'" width="90" valign="top" >'.$row["cleanrovidnevek"].'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="30" valign="top" align="center">'.$row["db"].'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="40" valign="top" align="center" >'.$checksum.'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="100" valign="top">'.$row["uzenet"].'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="100" valign="top">'.$row["telepules"].'</td> 
    <td style="color: '.${'tablerow'.$row['id']}.'" width="80" valign="top" align="right">'.$row["vegosszeg"]. " Ft".'</td> 
    <td width="0"><input type="hidden" name="id[]" value="'.$row['id'].'" /></td> 
    <td width="40" valign="top"><input type="image" formaction="delete.php?id='.$row['id'].'" width="20" height="20" src="/megrendelesek/images/trash.svg"></td> 
    </tr>';
}

// 输出表格和表单的结尾部分
echo '</tbody>
</table>
</form>';

2. 正确初始化jQuery UI Sortable #

现在所有行都在同一个<tbody>里了，修改你的JS代码，针对<tbody>初始化排序，同时处理行内表单元素的拖拽干扰：

$(function() {
    // 针对tbody里的tr进行排序
    $(".draganddrop tbody").sortable({
        // 可选：指定拖拽的手柄（比如第一列的图标），避免点击输入框时触发拖拽
        handle: "td:first",
        // 排序结束后的回调，用来保存新的顺序到后台
        update: function(event, ui) {
            // 获取所有行的ID顺序
            var sortedIds = $(this).find("input[name='id[]']").map(function(){
                return $(this).val();
            }).get();
            
            // 通过AJAX提交排序到PHP后台保存
            $.ajax({
                url: "save-sort-order.php", // 你处理排序保存的PHP文件
                type: "POST",
                data: {order: sortedIds},
                success: function(response) {
                    console.log("排序已保存");
                }
            });
        }
    }).disableSelection(); // 禁用文本选择，提升拖拽体验
});

3. 补充：给行添加data-id（可选） #

为了更方便获取排序后的ID顺序，可以在<tr>标签上添加data-id属性：

echo '<tr data-id="'.$row['id'].'">';

之后在update回调里可以用更简洁的方式获取ID：

var sortedIds = $(this).sortable("toArray", {attribute: "data-id"});

为什么之前的代码无效？ #

你之前尝试的$(".draganddrop").children('tbody').children('tr').sortable({ });无效，是因为.draganddrop每个都是独立的表格，它们的<tbody>里只有一行，根本没有其他行可以排序，所以拖拽后自然会回位。只有当所有可排序的行都在同一个父容器（同一个<tbody>）里时，Sortable才能正常工作。

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