Sort Images Script

The following script is used in part 22 of the Image Gallery Tutorial at This code can be copied and pasted into your document. For more information, go to

  <script src="//"></script>
    $(function() {
      $( "#record" ).sortable({cursor: "move"},{revert:true},{scroll:true},{scrollSensitivity: 10},{tolerance: "pointer"});
      $( "#record" ).disableSelection();
      $( "#record" ).sortable({
        update: function( event, ui ) {
          var listItems = $('#record div');
          listItems.each(function(idx) {

Hi @ben,

i’ve implemented a similar function with jquery-ui-sortable. The sortable elements (just a list which can be vertically sorted) are retrieved from a serverconnect-action. After resorting the elements and updating them in the database (which works fine), i have a problem that as soon as the serverconnect is being reloaded (e.g. after adding or deleting an element), the order is visually messed up (in the database and also in the serverconnect itself is correct, but in the browser its in the wrong order). I think it’s because the nodes somehow get cached; so for example i have a list:

when i drag “A” to the third position, the new order B, C, A is correctly saved. After serverconnect-reload, in the browser i see C, A, B. So the first serverconnect-element is actually displayed at the third position (in the node, which initially was the first node and has been manually dragged to the third position). Any ideas how to solve this? Hope you understand what i mean.

Lara, Wappler now has its own sorting module. Have a look at

Sortable is near the end as in