Question

I was reading this code (http://jqueryui.com/droppable/#photo-manager),
but couldn’t understand one specific line

var $gallery = $( "#gallery" ),
    $trash = $( "#trash" ); 

$( "li", $gallery ).draggable({ //This is the line a I can't understand well
        cancel: "a.ui-icon", 
        revert: "invalid", 
        containment: "document",
        helper: "clone",
        cursor: "move"
});

why is the $gallery there? it’s not making the $gallery draggable, only <li> is draggable.

It seems that only <li> inside #gallery can be dragged, but that’s easily done with $("#gallery li") or $("#gallery > li")

So what’s different?

Answer 1

The 2nd argument to the $() function is the context. It’s equivalent to:

$gallery.find('li');

Yes, in this case, you can also do: $("#gallery li"), but the context option is good, when you are just passed a DOM element or jQuery object, and don’t know its selector.