Home/ Questions/Q 8377315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:38:29+00:00

I use jquery draggble function for unorderd list (ul) and face a problem of

  • 0

I use jquery draggble function for unorderd list (ul) and face a problem of getting the order of items after it changed and setting the order ofter page is loaded.Suppose we have the following code : 

<html>
   <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>  </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
      $(document).ready(function(){

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // send this order to index.php and store it in db

            }
         });
      });
  </script>

  </head>
  <body>
      <ul class="block" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
  </body>

and the second file is 

<html>
  <head>
  <script>
         $('.secondblock').sortable({axis:'y'});
      // get order from index.php and set it to .secondblock

  </script>
  </head>
    <body>
     <ul class="secondblock" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
    </body>
 </html>

Are there any possible solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you don’t want to use that solution on the link I’ve commented, you can use this, much simpler:

    function reorder(orderArray, elementContainer)
{
    $.each(orderArray, function(key, val){
        elementContainer.append($("#"+val));
    });
}

    orderArray: an array containing all ids in the order you want ( exactly what sortable( “toArray”) returns)

    elementContainer: is the jQuery object which contains your sortable items.

    A working example here:
    http://jsfiddle.net/ecP5k/1/

    • 0