JQuery UI Sortable: updating hidden input value for each item with a new position

Question

Working with JQuery UI is sorted to move around the list of elements and tries to update its position in the form field values. I cannot figure out how to update the hidden input value for each item with its updated position number. All values ​​of the "current position" should change with each movement. And the position digits are displayed in reverse order on the page.

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

The value of the element [#] [currposition] must be changed to a new updated position number for all elements. The position value for each element must be updated and have the correct value when submitting the form. And the positions will be compared with the original values ​​when serving.

The closest I got so far is something like:

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

Thanks for the help.

Answer 1

You must use the stop event to update the position when the sorting ends.

What I did when the sorting ends, you extract the list of inputs that you want to update, and their numbers, and for each - a new position. The each () method provides the current index of the item in the list as an argument.

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

Jsfiddle work

Answer 2

You can follow the command below:

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