javascript - 根据位置 javascript 对文本字段进行排序

Question

我在表单中有 6 个垂直对齐的文本字段，其值与其位置相对应。每个文本字段都有一个与其关联的水果名称，该名称不可编辑(可编辑文本字段就像序列号，如果可以的话)
See JSFIDDLE URL

1 Apple
2 Banana
3 Cranberry
4 Date
5 Elderberry
6 Fennel

分别。用户可以编辑和更改(仅数字，水果名称不可编辑)它们在 1 到 6 之间的值(我有一个单独的 javascript 函数，不允许用户输入除正整数以外的任何内容，并且不超过最大值数数)。我想编写一个 javascript/jquery 函数，它将通过以下方法对数字进行排序:

假设用户将值 3 更改为 5，则意味着值为 3 的文本框移动到第 5 个位置。这意味着值 4 和 5 分别被推至值 3 和 4(就像随机访问数组中的弹出和插入)。所以现在新值将是

1 Apple
2 Banana
5 Cranberry    <-- user edited this from 3 to 5
3 Date         <-- Javascript changed this
4 Elderberry   <-- Javascript changed this 
6 Fennel

请注意，值 3 位于第 4 个位置，值 4 位于第 5 个位置，并且值 1,2 和 6 不受影响。

现在，如果值 4(现在对应于 Elderberry)再次更改为 1，我们应用相同的逻辑，JavaScript 排序后的输出将如下所示

2 Apple
3 Banana
5 Cranberry
4 Date
1 Elderberry   <-- user changed value from 4 to 1
6 Fennel

现在，当用户保存并重新加载页面时，项目及其相应的索引将被写入数据库，现在将如下所示，

1 Elderberry
2 Apple
3 Banana
4 Date
5 Cranberry
6 Fennel

提前致谢。任何形式的建议或帮助都值得赞赏!

我尝试过的代码:

function sort(oldnumber, newnumber) {
    var widget = $('#id'+oldnumber);  //assuming the text boxes are id1, id2, ... 
    if(oldnumber < newnumber) {
        for(var i = oldnumber+1; i <= newnumber; i++) {
            $('#id'+i).val(i-1);
        }
    }
    else {
        for(var i = oldnumber-1; i >= newnumber; i++) {
            $('#id'+i).val(i+1);
        }
    }
}

Answer 1

使用 insertBefore 方法，您可以轻松地对行进行重新排序。重新索引只需在插入后完成。这是一个简单的演示:http://jsfiddle.net/cgb2qLj2/

$('.row .num').on('change', function (evt) {
    var num = $(this).val();
    $(this).parent().insertBefore($('.row:nth-child('+num+')'));
    $('.row .num').each(function (i, input) {
        $(input).val(i + 1);
    });
});

<小时/>

编辑:在不更改行顺序的情况下，由于一些额外的条件，它会稍微复杂一些，但它可以完成工作。请注意，我们还必须保存之前的值才能实现正确的行为。

更新的 fiddle :http://jsfiddle.net/cgb2qLj2/3/

更新的代码:

var val = $(input).val();
if (input != self) {
    if (val > old && val <= num) {
        $(input).val(+val - 1);
    } else if (val < old && val >= num) {
        $(input).val(+val + 1);
    }
}