set order to jquery sortable

Question

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(){
            $('.secondblock').sortable({axis:'y'});

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // set this order to .secondblock

            }
         });
      });
  </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>
      <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>

Are there any possible solutions?

So, you want to save the order of the elements, so it's the same when you re-load the page? — gen_Eric, Aug 08 '12 at 17:43
yes, i've ommited details of post and getting the strings with orders, just need to understand how can i get and set orders of list items — ilya.stmn, Aug 09 '12 at 07:33

score 5 · Accepted Answer · edited Jul 15 '19 at 09:13

First, you shouldn't have the same id appear twice in a document. That will cause all kinds of problems.

Instead, set a data-attribute on the items in the second list to reflect corresponding items in the first list:

<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>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

Then reflecting the sort of the first list in the second list is simple:

$('.block').sortable({update: sortOtherList});

function sortOtherList(){
    $('.block li').each(function(){ 
        $('.secondblock [data-block-id=' + $(this).attr('id') + ']')
            .remove()
            .appendTo($('.secondblock'));

    });
}

See it working here: http://jsfiddle.net/6HKZG/2/

actually after update i will send order of sortable to server and store this order in database. Next time page is loaded i will get order from server and set to sortable. — ilya.stmn, Aug 09 '12 at 03:44

score 1 · Answer 2 · edited May 23 '17 at 12:27

Faust's looks better to me. Mark it if it's what you wanted.

Yes. I feel like I need more information, but I had to do almost the exact same thing recently.

First, you want to extend the javascript array object with a sorting algorithm. Here is what I use:

Array.prototype.move = function (old_index, new_index) {
    if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
    }
    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
    return this; // for testing purposes
};

source Move an array element from one array position to another

Then, what I would do is use this along with an OldPosition/NewPosition function to get the index of the element before and after the sort, and use this method to move the object in the array.

I think JQuery sort let's you get information about the array before and after the sort

ex:

$('li').presort(function() {
  window.oldindex = $(this).index();
});
$('li').postsort(function() {
  window.newindex = $(this).index();
  array.move(oldindex,newindex);
});

If you're just looking to make .secondblock match .block after sort, you can do this: source: http://jqueryui.com/demos/sortable/#events

$( ".selector" ).sortable({
   start: function(event, ui) { //Get the order of the .block list items before dragging }
});
$( ".selector" ).sortable({
   stop: function(event, ui) { //Get the new order of the list items after dragging. Compare the two orders and sort .secondblock to match block }
});

set order to jquery sortable

2 Answers2

Linked