There is a list, I would like to change the display position in the administration panel. That is, there is a position column in the database, it indicates the current position of the text. Apparently implementation on javascript or jquery. I saw this, in my opinion, in e107, when the output position can be changed "on the fly" or, for example, in the VC, you can change photos in places similarly on the fly. Question: how to do it?
The list is displayed according to the cycle from the database.

  • and how was it done before ?? After all, there was no jQuery before ??? - DemoriaN

2 answers 2

The fastest way is to insert hidden input into the blocks and, after dragging them, call a function that would pass through 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 input and in each iteration we increase it by one. Here is the html block code

 <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 to the database values.

  • function on js or jquery? - DemoriaN
  • For the dragging function, jqueyui is used, which work together with jquery, so the function itself that writes the values ​​in inputs on jquery is makregistr

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