Javascript 使用UI Sortable，在单击按钮时根据给定值将项目移动到新位置？

当我单击某个链接或向任何可能的UI事件传递值的按钮时，是否有方法强制UI Sortable更改列表中的项目位置

这里是可排序函数：

$("#sortable").sortable({
    start: function(event, ui) {
       // ... 
    },
    update: function(event, ui) {
       // ... 
    },
    stop: function(event, ui) {
       // ... 
    }
});

这是一个更新指定行中文本输入值的按钮的偶数。。。它实际上触发了一个Ajax，但我在这里把它简化了：

$("#sortable tr").on("click", ".row-button", function () {
    var sort_id = $this.closest('tr').find('.text-sort-id').val();
    ...
    ...
});

更新： 这是我迄今为止所做工作的结果。当我将第二行中的输入更改为“5”时，我需要能够在将第四行输入更改为“1”时，单击“更改”将其直观地移动到表的底部等等

---

我希望在单击“更改”按钮时能够更改项目值，而无需重置所有其他项，并且可以从另一侧进行更改，可以拖动任意一行并将其输入值更改为小于其后面的一行，大于其前面的输入，即使需要设置相等的值，也不会更改其他值。

请查看代码中的注释以了解我所做的解释。我已经用以下代码更新了

.sort btn

单击事件：

$(".grid-sort-table tbody tr").on("click", ".sort-btn", function() {
    var allItems = $('.ui-sortable').children();

    //Select all of the input values
    var orderedInputValues = $.map(allItems, function(item) {
            return $(item).find('input').val();
    });

    //Order the input values (smallest to largest, by default)
    orderedInputValues = orderedInputValues.sort(); 

    //Store the "tr" in a variable so it can be manipulated.
    var selectedItem = $(this).closest('tr');
    var selectedItemVal = $(selectedItem).find('input').val();

    var indexToInsertAt = 0;
    for (var i = 0; i < orderedInputValues.length; i++) {
        if (orderedInputValues[i] == selectedItemVal) {
        indexToInsertAt = i;
        break;
      }
    }

    //Find the item at the index the selected item will be inserted at (before or after)
    var itemAtIndex = allItems[indexToInsertAt];

    //If the selected item's value is greater than the item at the required index, insert it after the item.
    if ($(selectedItem).find('input').val() > $(itemAtIndex).find('input').val()) {
        selectedItem.insertAfter(itemAtIndex);
    }
    else { //Otherwise, insert it before the item at the required index.
        selectedItem.insertBefore(itemAtIndex);
    }
    //Additional code below
    ...
});

$（“.grid sort table tbody tr”）。在（“单击“，”.sort btn“，函数（）上）{
var allItems=$（'.ui sortable'）.children（）；
//选择所有输入值
var orderedInputValues=$.map（所有项、函数（项）{
返回$（item）.find（'input'）.val（）；
});
//对输入值进行排序（默认情况下，从最小到最大）
orderedInputValues=orderedInputValues.sort（）；
//将“tr”存储在变量中，以便对其进行操作。
var selectedItem=$（this.closest（'tr'）；
var selectedItemVal=$（selectedItem.find（'input'）.val（）；
var indextoinserta=0；
对于（变量i=0；i$（itemAtIndex.find（'input'）.val（））{
选择editem.insertAfter（itemAtIndex）；
}
else{//否则，将其插入到所需索引处的项之前。
选择EdItem.insertBefore（itemAtIndex）；
}
//下面是附加代码
...
});

您能为您迄今为止所做的工作创建一个完整的文档吗？谢谢@Yass我更新了我的问题。谢谢您的努力@Yass，它正在工作，但有一些问题。例如，尝试将第三行的值设为“7”甚至“4”，它不会下降，但如果为“2”，则会起作用。干得好哦。。我刚刚注意到，我在发布前刚刚测试的可排序更新事件为all提供了值，并相应地更改了所有items的值。在某些情况下，我不需要这种情况发生。这里有一个更新的Fuddle，它使用了您的click事件，我仍然需要您的帮助，以避免更改其他行的值。好的，让我总结一下我所有的最终需求，我希望在单击“更改”按钮时能够更改项目值，而无需重置所有其他项，并且从另一个侧面，能够拖动任何行并将其输入值更改为小于后面的行，大于前面的行，即使需要设置相等的值，也不会更改其他值。查看代码中的注释，您应该能够进行足够的更改，以防止文本框中的值升级。我现在没有时间看这个问题，我会尽快回复你。我相信我确实以令人满意的标准回答了你最初的问题，但是如果你对答案不满意，你不必这样做。我仍然可以进一步研究这个问题，但你必须明白我的时间在工作日是有限的。