Question

My web app has a feature where users can create a list of up to five items. When a list is created, we automatically name it after the first item, though the user can also type a custom name. So, you’ll have something like this:

Name: [ Item 1 ] (this is a text box)

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

I’ve also set up jQuery UI’s sortable interaction so that users can click and drag to rearrange items in the list. Now, what I want to do is auto-rename the list after whatever the first item is once the user completes a drag, but only if they haven’t entered a custom name (which can be determined by comparing the name to the original first item and seeing if they match).

I know that sortable provides a number of events that you can use to run custom functions (like start and stop). The problem is that I need to run functions both before and after the drag happens in order to do the comparison, but (as far as I know) I can’t pass data between them – a variable defined in start can’t be used in stop. So how would I write this?

Answer 1

I solved this by saving the first item in a global variable on start, then using that to compare to the current title on stop. Maybe not the best way to do it, but it does work:

var saveFirstItem = function(first_item) {
    startFirstItem = first_item;
};

$(document).ready(function(){
    $("#list").sortable({
        start: function(event, ui){
            var first_item = $("#list li:first-child").text();
            saveFirstItem(first_item);
        },
        stop: function(event, ui){      
            var first_item = $("#list li:first-child").text();      
            var current_title = $("#title").val();

            if (current_title == startFirstItem){
                $("#title").val(first_item);
            }
        }
    });
});