使用UI可排序，当我单击按钮时，根据给定的值将项目移动到新位置？
使用UI可排序，当我单击按钮时，根据给定的值将项目移动到新位置？
提问于 2016-02-22 15:18:42
当我单击将值传递给任何可能的UI事件的链接或按钮时，是否有一种方法强制UI可排序更改列表中的项位置？
这里是可排序函数：
$("#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结果。当我将第四行的输入更改为"1“时，我需要能够将第二行的输入更改为"5”，然后单击“更改”，视觉上移动到表的底部，以此类推。
我希望能够在单击“更改”按钮而不重置所有其他行和从另一侧更改项目值时，能够拖动任何行，并将其输入值更改为小于前面的输入值，而这一切都是在不更改其他值的情况下发生的，即使我们需要设置相同的值。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-22 21:56:17
请参阅代码中的注释，以了解我正在做的事情。我用以下代码更新了.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
...
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35557313
复制相关文章
相似问题
腾讯云开发者
