使用UI Sortable，当我单击按钮时，是否可以根据给定的值将项目移动到新位置？

hsobhy 发表于 Dev

索比

当我单击一些将值传递给任何可能的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”时。

我希望能够在单击“更改”按钮时更改项目值，而无需重置所有其他项目，而又要从另一侧进行更改，能够拖动任何行并将其输入值更改为小于此后的值，然后小于其之前的输入值，并且此值即使我们需要设置一个相等的值，所有这些都不会更改其他值。

亚斯

请查看代码中的注释，以了解我在做什么。我已.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
    ...
});

更新的小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。