Message order

There is a list, I would like to change the display position in the administration panel. That is, the database has a positioncolumn, it indicates the current position of the text. Apparently the implementation is in JavaScript or JQuery. I saw something similar, in my opinion, in e107, when the position of the output can be changed on the fly or, for example, in VK, you can swap photos in places similarly on the fly. Question: how to do it?
The list is displayed accordingly by a cycle from the base.


Answer 1, authority 100%

The fastest way is to insert hidden inputs inside blocks and after dragging them, call a function that would iterate over them and write down the position value, something like this

$(function() {
    $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight",
        start:function(){ return sortNumber = 1;},
        stop: function(){
            $('li input').each(function(){
                $(this).val(sortNumber);
                sortNumber++;
            });
        }
    });
});

When the function starts, we create a variable that will be written to the inputs and increase it by one in each iteration. Here is the html code of the block

<form action="" method="post">
    <ul id="sortable">
        <li class="ui-state-default">Item 1<input class="hidden" type="text" name="pos1" value="" /></li>
        <li class="ui-state-default">Item 2<input class="hidden" type="text" name="pos2" value="" /></li>
        <li class="ui-state-default">Item 3<input class="hidden" type="text" name="pos3" value="" /></li>
    </ul>
    <input type="submit" />
</form>

We send all this to the server and write the values ​​​​to the database.


Answer 2

http://wil-linssen.com/entry/jquery-sortable-lists-with-drag-drop-handle/ as I understand it