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

Question

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

这里是 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();
    ...
    ...
});

更新:

这是一个jsFiddle我到目前为止所做的结果。例如，当我将第二行中的输入更改为“5”并单击“更改”时，我需要能够将其视觉移动到表格底部，依此类推，当将第四行输入更改为“1”时。

我希望能够在单击更改按钮时更改项目值而不重置所有其他按钮，并且能够从另一侧拖动任何行并将其输入值更改为小于之后的值和大于之后的值它之前的输入和这一切都在不改变其他值的情况下发生，即使我们需要设置一个相等的值也是如此。

Answer 1

请查看代码中的注释以了解我在做什么。我用以下代码更新了 .sort-btn click 事件:

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

Updated Fiddle