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

Posted 2023-05-09

【中文标题】jQuery UI Sortable：使用新位置更新每个项目的隐藏输入值

【英文标题】：jQuery UI Sortable: Updating hidden input value for each item with new position

【发布时间】：2013-01-22 02:22:28

【问题描述】：

使用可排序的 jQuery UI 在项目列表中移动，并尝试更新它们在表单字段值中的位置。我不知道如何使用更新的位置编号更新每个项目的隐藏输入值。所有的“当前位置”值都应该在每次移动时发生变化。并且位置编号恰好在页面上以相反的顺序显示。

<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>

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

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

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

            );
        
    );
);

感谢您的帮助。

【问题讨论】：

请注意，提问者希望项目以相反的顺序显示。

【参考方案1】：

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

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

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

工作jsfiddle

【讨论】：

这正是我想要做的。非常感谢！

update event 不是更适合这个吗？

@Mark 我想它也会起作用，我不记得确切原因，但当时我遇到了update() 不如stop() 可靠或可能多次调用的问题。

这是一篇旧帖子，但现在正在帮助我。我正在运行并发布从下到上订购所有内容的问题。在查看 jsfiddle 时，底部列表是数字 1，顶部是 4。重新排序时，底部列表将始终是当前位置 1。有没有办法将其反转，因为可排序列表将是顶部 1 和 4在底部？谢谢！

使用 var nbElems = inputs.length 给出错误；所以我删除并替换了 $(this).val(nbElems - idx);与 $(this).val(idx-1);现在工作正常。

【参考方案2】：

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

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

【讨论】：

这太完美了！