jquery ui selectable - nothing happens

I don't know if I'm using the .sel开发者_JS百科ectable() API of jQuery UI entirely wrong. The expected result of this script is to simply get some alerts during the selecting of the black box (div):

http://jsfiddle.net/jMDVm/32/

I've had nothing but trouble with creating my own selectables() so I feel I must have missed something very basic about that particular function.

Note that in the documentation, you call .selectable() on an element, and then the elements inside that become selectable. You want to add some things inside of your #selectable div.

http://jsfiddle.net/jMDVm/40/

As seen in the documentation example - you need to call .selectable() on your #wrapper to affect all of its child nodes.

Here is an updated fiddle of your markup/code.

$("#wrapper").selectable({
        selected: function(event, ui) {
            alert("Selected");
        },
        selecting: function(event, ui) {
            alert("Selecting");
        }
});

<div id="wrapper" style="width: 250px; height: 250px;">
            <div id="selectable"></div>
</div>