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

我有一张有桌子的表格。这张桌子有几行

<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来实现这一点的方法。在jQueryUI站点上的示例中，他们使用

list

s而不是

table

s

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

---

如果您只想在拖放后与使用可排序的的和事件之前保持相同的排序值，请参见以下内容，与此类似：

$(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()
    });
});

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

使用附加变量，您可以将当前排序值存储在

start

上，然后在

stop

上重新应用它们

---

-将排序重新设置为拖放前的排序

---

如果您需要应用不同的业务逻辑，那么可以使用相同的事件并应用您自己的逻辑，或者根据需要使用任何其他逻辑

---

我需要排序顺序来确定它的位置。所以 第1行是1，第2行是2，依此类推

作为可编辑输入的排序当时令人困惑，但如果这是您想要的，则不要使用

开始

事件，只使用

停止

并每次重新设置值，类似于此：

$(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()
    });
});

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

---

-重新设置排序位置

---

---

我正在研究这个问题，只是回来看看它是否得到了回答。不过，这个答案有点不同，因为它在排序时会调整值

var sort;
$(function () {
    $("#sortable tbody").sortable({
        change: function( event, ui ) {
            //alert(ui.helper.find('td input[name^=sort]').val(7));
            sort = 0;
            $('#sortable tr.ui-state-default:not(".ui-sortable-helper")').each(function(){
                sort++;
                if($(this).hasClass('ui-sortable-placeholder'))
                    ui.helper.find('td input[name^=sort]').attr('name','sort'+sort).attr('value',sort).val(sort);
                else
                    $(this).find('td input[name^=sort]').attr('name','sort'+sort).attr('value',sort).val(sort);
            });
        }
    });
    $("#sortable tbody").disableSelection();
});

---

业务规则是什么，因为我可以指定任意随机数。假设我有排序为

的
第1行
、排序为
的
第2行
和排序为
的
第3行
和排序为
的
第7行
，以及排序为
的
第4行
。当我将
第3行
拖动到位置1时，排序中现在需要的顺序是什么？我假设您希望排序顺序始终相同，无论行位于何处，或排序值是否连接到它们所设置的行？我需要排序顺序与它所处的位置一致。所以第1行是1，第2行是2，依此类推。@DougSteinberg:在Chrome中运行两个fiddle，无论拖动哪个元素，所有排序值都会更新。你在哪个浏览器上运行这些示例？@DougSteinberg我能得到一些关于我答案的反馈吗？谢谢