Get order of list items in a jQuery Sortable list after resort

Question

I have a list on my website. I'm using jQuery's sortable tutorial to give users the ability to change the order of the list items.

http://jqueryui.com/demos/sortable/

The trick is I would like to capture the order of the items immediately after a resort and assign the order values to hidden form elements which would be passed to my server via a form-submit where I could use a php script to save the new order of elements in a database.

Here's the source code of the demo:

 <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

And I'm aware that it's also possible to assign a call-back function that fires when sorting stops:

$( ".selector" ).sortable({
   stop: function(event, ui) { ... }
});

Thanks!

Hyperplane

Answer 1

I wrote an answer to this question 5 years ago, but that answer sucked (and this question has almost 38,000 views), so here's an improved answer.

There's essentially three parts of this question that you have to solve. We'll look at all three.

Responding to changes in the sort order (Step 1)

The first issue we need to solve is reacting to changes in the order of sorted elements. If we check out the jQuery UI Sortable Widget's documentation, we see that it has a change event which fires whenever the sort order changes, and is perfect for our needs.

Side note: My original answer used stop instead of the change event. change is better (at least in this case) because it will report all changes in sorting, whether the change was interactive (user) or programmatic, and only if the order has actually changed. On the other hand, the sort event is only fired when the user stops sorting (releases the mouse, or lifts their finger).

Using the sort event, we can now respond to changes in sorting. The following will initialize a Sortable widget for us, and allow us to set a function to be called when the sort even fires:

var $sortableList = $("#your-list");

var sortEventHandler = function(event, ui){
    console.log("New sort order!");
};

$sortableList.sortable({
    stop: sortEventHandler
});

// You can also set the event handler on an already existing Sortable widget this way:

$sortableList.on("sortchange", sortEventHandler);

With that done, we're now ready to take on step 2:

Retrieving the sorted elements (Step 2)

This part is fairly simple. We just need to get an array of the elements in our sorted list. To do this, we can just ask for the children of the ul (list) element, using the jQuery function children():

var listElements = $sortableList.children();

console.log(listElements); // [ <li>, <li>, ... ]

Great, but we specifically need the element's values:

var listValues = [];

listElement.forEach(function(element){
    listValues.push(element.innerHTML);
});

console.log(listValues); // [ "Item 1", "Item 2", ... ]

Using .sortable("toArray") or .serialize() are also options.

Nice! On to the final bit.

Serializing & sending off the new sorted order (Step 3)

Serialization is "the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer, or transmitted across a network connection link)" (thanks Wikipedia!)

How you do this depends a lot on your specific needs, so we'll just discuss some of the ways you could get it done using jQuery.

AJAX:

If we use AJAX, we can just shoot off a request to the server with the new order. jQuery will automatically handle serializing listValues for us:

$.post("your-server.com/save_order", { "items": listValues } );

Or if you prefer JSON:

$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );

Form

Create a form:

<form action="your-server.com/save_order" method="POST">
    <input name="items" value="" />
</form>

Update the item input:

var serializedValue = $.param(listValues);

$("#ourForm > input").val(JSON.encode(listValues));

Send it:

$("#ourForm").submit()

Old answer:

HTML:

<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>

JavaScript:

$(".selector").sortable({
    stop: function(event, ui) {
        var data = "";

        $("#sortable li").each(function(i, el){
            var p = $(el).text().toLowerCase().replace(" ", "_");
            data += p+"="+$(el).index()+",";
        });

        $("form > [name='new_order']").val(data.slice(0, -1));
        $("form").submit();
    }
});

And in save_order.php, you can parse the POST variable "new_order" and get the orders of Item 1, Item 2, Item 3, etc.

Lombardo

Please can you explain this answer rather than just pasting code. – Dilator

@Phil_1984_ I rewrote this answer. Let me know if it helps. – Lombardo

Thanks. Your "Step 2" is the part I was interested in (and I think the OP too). I initially found it strange that the newly sorted element order was not made available in any of the fired events. The official docs go on about the old and new positions, but only as useless top & left pixel values. The library itself manipulates the element positions inside of the DOM for you, so doing a simple jquery selector in the event handler will give you the new order. – Dilator

hey @Lombardo i am new to jquery... can you please provide jsfiddel for this because i am finding difficulty to understand this – Odyssey

What parts are you having trouble with specifically? – Lombardo

Answer 2

Try using serialize to format a string to send to your database update script.

http://jsfiddle.net/zFQ2j/

http://docs.jquery.com/UI/Sortable#method-serialize

Vestpocket

Answer 3

May this helps:

alert($( "#sortable" ).sortable( "toArray" ).toSource());

Dunfermline

You need to have an id attribute on your lis or specific another attribute like alert($( "#sortable" ).sortable( "toArray", {attribute: 'data-item_number'} ).toSource()); for this to work. – Tavia

Relevant answer to elements without IDs: https://mcmap.net/q/452663/-jquery-ui-sortable-39-toarray-39-returns-an-empty-array – Calciferous

Answer 4

May, 2018

This Javascript example will give you all list of DIVS in #sortableContainer each time sorting is done

<div id="sortableContainer">
   <div id="Element1" class="sortIt">Item 1</div>
   <div id="Element2" class="sortIt">Item 2</div>
   <div id="Element3" class="sortIt">Item 3</div>
   <div id="Element4" class="sortIt">Item 4</div>
</div>

JS:

$( function() {
  $( "#sortableContainer" ).sortable({

    stop: function(event, ui) {

      var itemOrder = $('#sortableContainer').sortable("toArray");

      for (var i = 0; i < itemOrder.length; i++) {
        console.log("Position: " + i + " ID: " + itemOrder[i]);
      }

    }
  });

});

DEMO and Credits: http://www.tutorialspark.com/jqueryUI/jQuery_UI_Sortable_Getting_Order_of_Sortable.php

Preponderate

Answer 5

Easy to solve:

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        var order_id = jQuery_2(ui.item).index();
        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

var order_id = jQuery_2(ui.item).index(); // Get order

Slew

Answer 6

And you can:

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        //var order_id = jQuery_2(ui.item).index();
        var order_id = [];

        $("#sort"+status_id+" li").each(function(index) {
            order_id.push($(this).attr('data-task-id'));
        });

        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

Slew

Please add some explanation – Aldine

Answer 7

This is how i did that Use event handler to capture the sort event and then get the sorted values through ToArray function and loop through the values and assign to array. This array then you can pass to Ajax post

    var $sortableList = $("#sortable");

var sortEventHandler = function(event, ui){
    var sortedIDs = $( "#sortable" ).sortable( "toArray" );
                var listValues = [];
                for (var i = 0; i < sortedIDs.length; i++) {

                listValues.push(sortedIDs[i]);
      }
            console.log(listValues);
};

$sortableList.sortable({
    stop: sortEventHandler
});

$sortableList.on("sortchange", sortEventHandler);

Ranson

Answer 8

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        //var order_id = jQuery_2(ui.item).index();
        var order_id = [];

        $("#sort"+status_id+" li").each(function(index) {
            order_id.push($(this).attr('data-task-id'));
        });

        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

Counterpart