ASP.NET MVC视图中行拖拽功能失效问题排查

1. 脚本加载顺序错误 #

你当前的脚本加载顺序完全颠倒了——依赖jQuery的Bootstrap JS、jQuery UI必须在jQuery核心库之后加载，否则这些库无法找到jQuery对象，直接导致拖拽功能失效。

修正后的scripts区块代码：

@section scripts {
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

    <!-- 先加载jQuery核心 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!-- 再加载依赖jQuery的jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <!-- 最后加载依赖jQuery的Bootstrap JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#table-1 tbody").sortable({
                items: "> tr", // 明确指定可拖拽的元素是tbody下的行
                cancel: ".btn", // 排除按钮元素，避免拖拽时误触发提交事件
                cursor: "move", // 统一拖拽时的光标样式
                update: function(event, ui) {
                    // 拖拽完成后可在这里收集排序后的ID，示例：
                    var sortedIds = $(this).sortable("toArray", {attribute: "data-pso-id"});
                    // 后续可通过AJAX将sortedIds提交到后端保存
                }
            }).disableSelection(); // 禁用文本选择，优化拖拽体验
        })
    </script>
}

2. 局部视图加载时机适配 #

如果这个局部视图是通过AJAX异步加载的（比如模态框场景），$(document).ready不会触发——因为文档加载完成时，局部视图还未插入DOM。需要在局部视图加载完成的回调中重新初始化拖拽：

• 比如在Ajax.BeginForm的OnComplete回调中添加初始化函数：

@using (Ajax.BeginForm("RemoveCustomMapping", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "mappings-modal-body",
    OnBegin = "showLoading",
    OnComplete = "hideLoading; initSortable();" // 局部视图更新后重新初始化拖拽
}))

• 同时把拖拽初始化逻辑抽成独立函数：

function initSortable() {
    $("#table-1 tbody").sortable({
        items: "> tr",
        cancel: ".btn",
        cursor: "move"
    }).disableSelection();
}

3. 新增行标识便于排序提交 #

为了拖拽后能准确获取排序后的ID列表，给每行<tr>添加自定义属性：

@foreach (var m in Model.CustomGroupPso)
{
    <tr data-pso-id="@m.PsoId"> <!-- 新增标识属性 -->
        <td>@m.Name</td>
        <td>1</td>
        <td>
            <!-- 原有表单代码不变 -->
        </td>
    </tr>
}

4. 样式冲突优化（可选） #

Bootstrap表格样式可能和jQuery UI拖拽样式冲突，可添加自定义样式确保拖拽元素可见：

.ui-sortable-helper {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    z-index: 1000;
}

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