Sort one list based on the order of a second list

i'm new to Jquery and am struggling to work out how to solve my problem.

I have two unordered lists, List A and List B. List A is sortable using .sortable({ axis: 'y' }) method. When List A is reordered, i would like to automatically reorder List B (which is not user sortable) to reflect the changes in List A.

I'm struggling to know where to start, if anyone can help, that would be greatly appreciated.

Thanks

Update: Here's some extra code from my page to put things into context.

<div class="cvOverview">
                <h4>CV Overview</h4>
                <ul class="sortable" id="listA">
                    <li id="item_1" class="editContent"><span></span>About me</li>
                    <li id="item_2" class="editContent"><span></span>Personal profile</li>
                    <li id="item_3" class="editContent"><span></span>Employment history</li>
                    <li id="item_4" class="editContent"><span></span>Skills &amp; Qualities</li>
                </ul>
                <p class="backButton editButton"><a href="cv.html" title="#"><span>Completed</span></a></p>
            </div>
<div class="cvMainContent">
                <h3>Dean Bates</h3>

                <ul class="sortable" id="listB">
                    <li id="item1">
                         <div class="cvContactDetails">
                    开发者_运维百科        Some text here
                        </div>
                    </li>
                    <li id="item2">
                        <div class="cvPersonalProfile">
                            Some text here
                        </div>
                    </li>
                    <li id="item3">
                        <div class="cvEmploymentHistory">
                            Some text here
                        </div>
                    </li>
                    <li id="item4">
                         <div class="cvSkillsFromJobs">
                            Some text here
                       </div>
                    </li>
                </ul>

            </div>

The two lists will contain the same items and the same number of items, eventually i'd like to add the functionality where if a list item is deleted or inserted into List A, the a corresponding item is deleted or added to List B.

From a design point of view, List A represents an overview to the user of what's in List B, so they can re-order and change the contents of the simplified list on one side and have these changes reflected in a more detailed list on the other.

Hope this helps.

Thanks again for your help.

Use the update event to sort the other list

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

Then you need to loop thru' your first list and move the items in your second list, if you supply the HTML / JS we might be able to help you with that.

try jsfiddle.com

Not sure if you are just storing the data as HTML or how complex the model is, but here the idea:

Use the sortable update function:

var userSortbaleList = $('#usersortableList');
var nonUserSortableList = $('#nonUserSortableList');

userSortbaleList.sortable({
       axis: 'y',
       update: function(event, ui) {
            $.each(userSortableList.children(), function(index, html){
                /** Need to see html or JS to do sorting */     
            }   
       }    
});

Here's a complete solution that works with your precise markup:

$('#listA').sortable({update: sortListB});

function sortListB(){

    $('#listA li').each(function(){

        $('#listB [id=' + $(this).attr('id').replace('_', '') + ']')
            .remove()
            .appendTo($('#listB'));

    });
}

See it in action here: http://jsfiddle.net/LnvEM/1/

How does it work? One by one, you go through each item in list A in order from top to bottom, remove the corresponding item from list B .remove(), and re-attach it to the back of list B .appendTo($('#listB')). Once you do this for each item in B, the one you started with will be on top, etc.

(Note: added extra text to the items in list B to visually differentiate them and indicate for each which item it tracks in list A. Not necessary for the solution, however.)