排序表格拖放样式并保存新订单

Question

我正在使用一个名为 jQuery Sortable (http://johnny.github.io/jquery-sortable/) 的 jQuery 插件。我正在使用页面上的最后一个示例，即“排序表”。我做了一个表，它是可排序的。文档并不详尽，我对 jQuery 的了解也有限。

到目前为止，我已经设法对表格拖放样式进行了排序。我需要完成的是按新顺序从每个 tr 中检索 id，将其存储在数组中并将其发布到服务器端脚本。

<table class="table table-hover sorted_table">
<tbody>

<tr id="1">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

<tr id="2">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

<tr id="3">
<td>Something</td>
<td>Information</td>
<td>Column</td>
</tr>

</tbody>
</table>

<script>
// Sortable rows
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
})
</script>

Answer 1

var table = $('.sorted_table').sortable({
    containerSelector: 'table',
    itemPath: '> tbody',
    itemSelector: 'tr',
    placeholder: '<tr class="placeholder"/>',
    onDrop: function (item, container, _super) {
        var ids = table.find('tr').map(function() {
            return this.id;
        }).get();
    
        console.log(ids);
        _super(item, container);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>

<table class="table table-hover sorted_table">
    <tbody>
        <tr id="1">
            <td>Something1</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
        <tr id="2">
            <td>Something2</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
        <tr id="3">
            <td>Something3</td>
            <td>Information</td>
            <td>Column</td>
        </tr>
    </tbody>
</table>