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

jquery sortable save order in database
jquery sortable remove item from list
jquery ui drag and drop list
jquery sortable tolerance
jquery ui sortable table save order
jquery sortable connectwith
jquery sortable with divs
jquery sortable save order in database mvc

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!

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.

Get the order of list item in jquery sortable, Part of your issue is a typographical error, omitting the # from the id in your jQuery selector. Otherwise, your usage of .sortable("toArray") is correct. (Note, I used  Learn how to use jQuery UI Sortable Interaction to get the order of Sortable Element . EDITABLE CODE: Getting the Order of Sortable--Tutorialspark.com.

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

javascript Get order of list items in a jQuery Sortable list after resort , javascript Get order of list items in a jQuery Sortable list after resort? $("#ourForm​").submit() $(".selector").sortable({ stop: function(event, ui) { var data = ""  The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table. Dependencies. UI Core; Widget Factory; Mouse Interaction

May this helps:

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

Save a re-ordered list with Jquery Sortable to DB [SOLVED , The datas are generated by Ajax with Jquery Sortable. Actually, it's a list where you can drag and drop items to re-arrange the order. the DB does not update (it stay on 0), when I use Firebug on Firefox it says that in the POST answer (​submitted with if i then do a var_dump($_POST) in my controller i get. I've implemented JQuery sortable, and it works fine. The problem is I can't pass the list in its new order to a controller so i can save it. <script type="text/javascript"&gt; $(document)

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

jQuery UI Sortable Tutorial, But how can we update our database every time the list is sorted? Accordign to the docs this event is triggered when the user stopped sorting and the DOM we are given a string list of all the item id's, it might look like fruit_2,fruit_1,fruit_3 . We can then send the new order to our server in an ajax request using $.get(). 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.

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

jQuery UI Sortable : Get the order of Sortable Element, EDITABLE CODE: <!DOCTYPE html> <html> <head> <title>jQuery UI Sortable : Get the order of Sortable Element</title> <meta name="viewport"  This solution is not wrong. It answers the question. The OP did not specify that he needed to sort a list of more than 100 items. If his list will never be longer than 100 items this solution is perfectly acceptable. +1 for pointing out that the solution is slow, -1 for declaring a solution that meets the requirements as 'wrong'.

How to use jQuery to sort and reorganize your content, jQuery will parse and sort everything quick! Make your HTML markup sort-able by jQuery Below find an example of the list of content : So when producing the HTML markup, we want to have a data field that identifies this. So our So now you can see that each list item has a data-category field. Here Mudassar Ahmed Khan has explained with an example, how to implement Reorder List with Drag and Drop feature using jQuery in ASP.Net using C# and VB.Net. The drag and drop ordering of Reorder List items will be performed using jQuery UI Sortable Plugin.

JavaScript Array sort() Method, The sort() method sorts the items of an array. The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down). By default, the  jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Jquery sortable serialize, jQueryUI sortable() method is used to re-order elements in the list or grid list after resort Get order of list items in a jQuery Sortable list after resort  Generally, you can use jQuery to reselect all the sorted items and then reading the content from the controls into an array of objects that contains the Id (a hash) and the caption. The array is then sent back to the server via an AJAX callback.

Comments
  • Please can you explain this answer rather than just pasting code.
  • @Phil_1984_ I rewrote this answer. Let me know if it helps.
  • 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.
  • hey @mattsven i am new to jquery... can you please provide jsfiddel for this because i am finding difficulty to understand this
  • What parts are you having trouble with specifically?
  • 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.
  • Please add some explanation