Question

使用jQuery UI可排序以移动项目列表，并尝试更新其在表单字段值中的位置。我无法弄清楚如何使用更新的位置编号更新每个项目的隐藏输入值。所有'currentposition'值都应该在每次移动时改变。并且位置编号恰好在页面上以反向顺序显示。

<div id='sort-list'>
  <div id='listItem_4'>
    ITEM 4
    <input class='originalposition' type='hidden' name='item[4][origposition]' value='4'>
    <input class='currentposition' type='hidden' name='item[4][currposition]' value='4'>
  </div>
  <div id='listItem_3'>
    ITEM 3
    <input class='originalposition' type='hidden' name='item[3][origposition]' value='3'>
    <input class='currentposition' type='hidden' name='item[3][currposition]' value='3'>
  </div>
  <div id='listItem_2'>
    ITEM 2
    <input class='originalposition' type='hidden' name='item[2][origposition]' value='2'>
    <input class='currentposition' type='hidden' name='item[2][currposition]' value='2'>
  </div>
  <div id='listItem_1'>
    ITEM 1
    <input class='originalposition' type='hidden' name='item[1][origposition]' value='1'>
    <input class='currentposition' type='hidden' name='item[1][currposition]' value='1'>
  </div>
</div>

项目[＃] [currposition]值应更改为所有项目的新更新位置编号。应更新每个项目的位置值，并在提交表单时使用正确的值。这些职位将与提交时的原始价值进行比较。

我到目前为止最接近的是：

$(function() {
    $( '#sort-list' ).sortable({
        update : function () { 
            var result = $('#sort-list').sortable('toArray');
            $('input.positioncurrent').each(function() {           

            });
        }
    });
});

感谢您的帮助。

Answer 1

您应该使用stop事件在排序结束时更新位置。

我所做的是，当排序结束时，您将检索要更新的输入列表及其编号，并为每个输入更新新位置。 each()方法将列表中元素的当前索引作为参数提供。

$(function() {
    $( '#sort-list' ).sortable({
        stop: function () {
            var nbElems = inputs.length;
            $('input.currentposition').each(function(idx) {
                $(this).val(nbElems - idx);
            });
        }
    });
});

工作jsfiddle

Answer 2

您可以按照以下命令进行操作：

let oldSort = $('.field_list').sortable('toArray');

jQuery UI Sortable：使用新位置更新每个项目的隐藏输入值

2 个答案: