ASP.NET MVC表格行拖拽排序功能实现求助

问题根源 #

1. 选择器错误：原代码中$("table-1")缺少ID选择符#，无法正确定位到ID为table-1的表格
2. 排序目标错误：直接对整个表格启用排序会导致表头被误拖拽，正确做法是仅对<tbody>内的数据行启用排序

修正后的核心JS代码 #

$(document).ready(function(){
    $("#table-1 tbody").sortable();
})

完整修正后视图代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
    <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

#table-1 tr:hover {
    background-color:aqua;
    color:#fff;
}
    </style>
</head>
<body>
    <div class="table-responsive">
    <table class="table" id="table-1" cellspacing="0" cellpadding="2">
        <thead>
            <tr>
                <th>ID</th>
                <th>Number</th>
                <th> Description</th>
            </tr>
        </thead>
            <tbody style="cursor:pointer;">
                <tr id="1"><td><div class="dragitem">1</div></td><td><div class="dragitem">One</div></td><td>some text</td></tr>
        <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
        <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
        <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
        <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
        <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
        </tbody>
    </table>
    </div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#table-1 tbody").sortable();
    })
</script>

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