javascript - 如何在拖动行时更新输入值？

Question

我有一个表格，其中有一个表格。该表有几行。

<table id="sortable">
    <tbody class="ui-sortable">
        <tr>
            <th>&nbsp;</th>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Sort</th>
        </tr>
        <tr class="ui-state-default" style="">
            <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
            </td>
            <td>
                <input type="text" name="id1" value="12">
            </td>
            <td>
                <input type="text" name="name1" value="Apple">
            </td>
            <td>
                <input type="text" name="price1" value="1.95">
            </td>
            <td>
                <input type="text" name="sort1" value="1">
            </td>
        </tr>
        <tr class="ui-state-default">
            <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
            </td>
            <td>
                <input type="text" name="id3" value="9">
            </td>
            <td>
                <input type="text" name="name3" value="Banana">
            </td>
            <td>
                <input type="text" name="price3" value=".95">
            </td>
            <td>
                <input type="text" name="sort3" value="3">
            </td>
        </tr>
        <tr class="ui-state-default" style="">
            <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
            </td>
            <td>
                <input type="text" name="id2" value="15">
            </td>
            <td>
                <input type="text" name="name2" value="Pear">
            </td>
            <td>
                <input type="text" name="price2" value="2.95">
            </td>
            <td>
                <input type="text" name="sort2" value="2">
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <input type="submit" value="submit">
            </td>
        </tr>
    </tbody>
</table>

使用 jQueryUI 我可以使用以下脚本拖动行:

$(function () {
    $("#sortable tbody").sortable();
    $("#sortable tbody").disableSelection();
});

我目前可以拖动行，但现在我还想在此过程中更改 sort 输入。

因此，如果我要将第三行拖到顶部，它们应该更改位置和 sort 输入中的数字。

我还没有找到使用 jQueryUI 来完成这项工作的方法。在 jQueryUI 站点的示例中，他们使用 list 而不是 table。

这可能吗？如果不是，什么是更好的方法？

这是 fiddle

Answer 1

如果您只是想在拖放之后保持与之前相同的排序值，您可以使用 start和 stop sortable 的事件，类似这样:

$(function () {
    var sortOrder = [];
    var $sortableTable  = $("#sortable tbody");

    $sortableTable.sortable({
        start: function(event, element){
            $.map($('[name^=sort]', $sortableTable), function(element){
                sortOrder.push(element.value);
            });
        },
        stop: function(event, element) {
            $.each($('tr [name^=sort]', $sortableTable), function(index, element){
                element.value = sortOrder[index];
            });
        }
    });

    $sortableTable.disableSelection();

    $('tr [name^=sort]', $sortableTable).on('keydown', function(){
        $(this).closest('tr').data()
    });
});

使用附加变量，您可以在 start 上存储当前排序值，并在 stop 上重新应用它们。

---

DEMO - 将排序重新设置为拖放之前的内容

---

如果您需要应用不同的业务逻辑，这很好，要么使用相同的事件并应用您自己的逻辑，要么使用任何其他 available events根据需要。

I need the sort order to corispond to what ever position it is in. So row 1 is 1, 2 is 2, and so on.

作为可编辑输入的排序当时令人困惑，但如果这就是你想要的，那么不要使用 start 事件，只使用 stop 并重新设置每次的值，类似于此:

stop: function(event, element) {
    $.each($('tr [name^=sort]', $sortableTable), function(index, element){
        element.value = index+1;
    });
}

---

DEMO - 重新设置排序位置

---