Jquery sortable list, return only affected (swapped) items

Posted on 2011-05-12
Last Modified: 2012-06-21
Hello all,

I am using the Jquery sortable demo from:

What if I have a list of 40 items, in the example the ordering with a query that will be looped 40 times. This seems a little silly to me, only two items are affected.

Is there a way to return only the two affected elements?

Question by:wal_toor
    LVL 12

    Accepted Solution


    I understand what you mean, but you have to be a bit careful here.
    Just because only 2 items have been moved, it does not mean that only 2 items need to be updated in the database.
    For example, if you move the bottom item to the top, all items will have changed place by one and will need updating.

    However, that being said, if an item has been moved by just one place, then only two items need updating in the database, and changing them all is inefficient.

    One way to deal with this would be to save the .sortable('serialize') results before the first sort, and each time the update event is called. You can then compare the previous order with the new order, and only send the changed positions to the PHP script to update the database.

    Here's a start to the code, though I don't have time to complete it, it should be enough to get you started.

    $(document).ready(function() { 
    // Save the initial sort order
    var oldOrder = $('#test-list').sortable('serialize');
        handle : '.handle', 
        update : function () { 
          var order = $('#test-list').sortable('serialize'); 
          var changedItems = compareOrder(order, oldOrder);
          $("#info").load("process-sortable.php?"+changedItems ); 
          // Save the updated sort order for the next time the list is sorted.
          oldOrder = $('#test-list').sortable('serialize');
    function compareOrder(newOrder, oldOrder) {
        // Comparison code goes here

    Open in new window

    The changedItems list will need to include both item, and its position, and the PHP code will need to take this into account when building the SQL
    LVL 8

    Author Closing Comment

    Thanks cyber spy,

    I have'nt thought of what you said. makes sense. Thanks for your reply. I'll dive into this.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now