Is there a clever way of getting the sortable target in jQueryUI

Question

I'm using jQuery UI to link a number of lists, and allow items to be dragged and dropped between the different lists.

In the receive event, I want to get the list that the item is dropped in. Is ui.item.parent() the correct way to do that, or is there a property of ui or event which will let me access this directly?

---

<ul><li>item 1</li></ul>
<ul><li>item 2</li></ul>

---

$('ul').sortable({
    connectWith: 'ul',
    receive: function(event, ui) {
        var targetList = ui.item.parent();
    }
});

Answer 1

Nope, there's no direct property for the new parent (because .parent() is easy enough probably), so what you have is correct. You can view all the ui properties here.

If you wanted .closest(), the second parent, etc...it's better to leave the UI slim since they're all easy enough to traverse to; this also saves the expense of providing the references directly on the ui object.

Answer 2

Since the receive event is called on the receiving list, you can get the new parent by $(this). The source list is accessible via ui.sender.

$('ul').sortable({
    connectWith: 'ul',
    receive: function(event, ui) {
        var sourceList = ui.sender;
        var targetList = $(this);
    }
});