jQuery UI Selectables - Start Drag-Selecting from Outside of Objects

Question

I am using the jQuery UI Slectable http://jqueryui.com/demos/selectable/

Once initialized (just like in the demo on that link). drag-selecting only works if I start holding the mouse button on top of a object. If I start drag-selecting from outside of the objects, the selecting does not work.

Is there any way to enable it so the user can initiate the drag-selecting outside of the Selectable objects?

Answer 1

The mouse event listener in the 'selectable' is bound to the wrapper element that you have attached it to. By attaching the it to the body and providing a filter you can get what you're looking for.

Based on the jQuery example:

$('body').selectable({ filter: '#selectable li' });

*Edit: Unfortunately because of this._trigger("stop", event); it will stop other events on the page.

Your best solution might be to just make the wrapper around the selectables larger.*

Answer 2

This behaviour is already happening, you just can't see it!

Simply adjust the css for your ul.selectable so that it properly contains the floated li's.

#selectable{
    overflow: hidden;
}