help on jquery sortable connected lists

Here is the exact copy of my code: jsFiddleCode

As you can see I have a two sortable connected lists and when some item is dropped to them they execute functions subFunction and unsubFunction respectively. Now, I also have the code for doubleclicking one of the items so that then they are put in the opposite list (the function switchLists() takes care of that.

Now, what I would like to accompl开发者_JS百科ish here is the same behavior as when the items are dragged and dropped (the alert box appearing and saying exactly (for example): "Item 6 just subed".

My lack of understanding is how can it be that I have the ui available when the function subFunction is called, and not when I call the switchLists. ( I did try to add ui to the call of switchLists like this:

switchLists(e, ui){  
  //same code as before...

  //this code doesn't execute
  var itemText= ui.item.text();
  alert(itemText + " just subed");  
}

But I get an error in FireBug in Firefox saying that the ui is undefined.

You are free to edit the code on fiddle and post it here as a link.

As a more general questions: how does jquery pass variables to other functions? I mean, the code:

receive: subFunction  

is called without any arguments, so how does the subFunction get event and ui? If you have some good tutorial on all this, it's appreciated.

Thank you for your help.

---

After a long day playing with this I finally came to the answer and did it like this: jsFiddle link

In short, I separated the previous function to two functions and I also read a little more about jQuery and found out that in the function I can do $(this) and so access the text of the element.

OK, just for reference the whole code is here:

$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",          
        receive: subFunction
    });     

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",          
        receive: unsubFunction
    });     

    $(".ui-state-default").dblclick(function() {
        $(this).removeClass().addClass("ui-state-highlight");           

        var litem = $(this).clone();
        litem.appendTo($('#sortable2'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    });

    $(".ui-state-highlight").dblclick(function() {
        $(this).removeClass().addClass("ui-state-default");         

        var litem = $(this).clone();
        litem.appendTo($('#sortable1'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully subed!", {header:"Subscription Status", life: 1000});          
    });     

    function subFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully subed!", {header:"Subscription Status", life: 1000});
    }

    function unsubFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    }

});