How do I get the id of sortable element?

Question

I'm using Sortable and got it up and working. But I'm trying to save what is where inside the lists.

Lets say i have 3 lists:

<ul id="top" class="connectedSortable">
<li>elem1</li>
<li>elem2</li>
<li>elem2</li>
</ul>

<ul id="left" class="connectedSortable">
</ul>

<ul id="right" class="connectedSortable">
</ul>

jQuery:

$("#top, #left, #right")
.sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui)
    {
        alert(this.id); // printing top, left right...
    }
})
.disableSelection();

I've tried to use the stop event inside sortable but it only returns the ul's id of course. So what I want is jQuery to tell me when I've moved elem1 from list1 to list2 (or any elemX of course).

I'm trying to make a homepage that the user could define the layout themselves.

Answer 1

I think you want to use the receive callback:

http://jsfiddle.net/nzskv/1/

$("#top, #left, #right").sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui) {
        alert("[" + this.id + "] received [" + ui.item.html() + "] from [" + ui.sender.attr("id") + "]");
    }
}).disableSelection();