如何通过javascript/jquery对表行列表进行排序？

假设我有这个html：

<table>
  <tr>
    <th>Sort Order</th>
    <th>Name</th>
  </tr>

  <tr class="item" id="item_1">
    <td class="sortorder">1</td>
    <td>ABC</td>
  </tr>

  <tr class="item" id="item_2">
    <td class="sortorder">2</td>
    <td>DEF</td>
  </tr>

  <tr class="item" id="item_3">
    <td class="sortorder">3</td>
    <td>XYZ</td>
  </tr>
</table>

排序顺序
名称
1.
基础知识
2.
DEF
3.
XYZ

我希望用户能够通过拖放对表中的行进行排序（不包括带有

的第一行，因此所有带有类

.item

的行），然后更新它们的排序顺序

例如，如果用户将DEF拖到第一个位置，ABC将其替换，我希望DEF的排序顺序为1，ABC的排序顺序为2

如何做到这一点

---

如果需要，我可以将所有项目分别存储在javascript数组或对象中，以便在用户更改排序顺序时循环它们并更新每个项目的排序顺序。

您可以使用jQuery UI的可排序列表。它在各种浏览器中都得到了很好的支持，并且有许多选项和回调。他们在示例中使用列表，但您也可以轻松地使用表

jQuery UI可排序文档-
可排序教程/指南-

例如：

$('table').sortable({
    items : '.item',
    update : function(event, ui)
    {
        alert('sort order updated');

        // Display sort order - also checkout serialize() method in jQuery UI Docs
        alert('sort order: ' + $(this).sortable('toArray').toString());
    }
});

---

jQuery有几个已经编写好的表排序插件：

• 其他人

---

我建议查看数据表中的类似内容。你能发布一些代码来说明如何在更新时获得新的订单吗？