使用 UI 可排序，当我单击按钮时，根据给定值将项目移动到新位置？

Question

有没有办法在我单击某些 link 或将值传递给任何可能 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();
    ...
    ...
});

更新：

这是我到目前为止所做的 jsFiddle 结果。例如，当我将第二行的输入更改为“5”并单击“更改”时，我需要能够将其视觉移动到 table 的底部，依此类推，当将第四行输入更改为“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

使用 UI 可排序，当我单击按钮时，根据给定值将项目移动到新位置？

Using UI Sortable, move item to new location based on a given value when I click a button?

javascript

jquery-ui

onclick

jquery-ui-sortable

更新：