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>