Web Development with jQuery®

Introducing the Selectable Plugin (^) ❘ 371

{

var path = ui.draggable.data('path'); ui.draggable.remove(); } });

An example of the Selectable jQuery UI plugin follows next. The contents of the

with id name

fi nderFiles is made selectable. The option appendTo is provided a selector that tells the selectable()

plugin where to put the

element that represents the selection box. The selection box is added

to the

element with the id fi nderFiles.

The option filter is used to tell the selectable() plugin which elements it contains are selectable,

and you do that by providing a selector to it to describe those selectable elements. The selector div.

finderDirectory, div.finderFile makes the

elements with class names fi nderDirectory or

fi nderFile selectable.

$('div#finderFiles').selectable({

appendTo : 'div#finderFiles',

filter : 'div.finderDirectory, div.finderFile',

The option start is provided a callback function that fi res each time a new selection begins. As you

learned in Chapter 12, each option that specifi es a custom UI plugin event accepts two arguments,

one for the event and another for passing additional UI plugin data. In this example, when selection

begins, the property finder.selectingFiles is set to true, and this is used to prevent the mousedown

event that you created earlier from also selecting fi les because that would confl ict with the selection

taking place using the selectable() plugin. In addition, any fi le selection that is already in place is

completely cleared by calling finder.unselectSelected().

start : function(event, ui)

{

finder.selectingFiles = true;

finder.unselectSelected();

},

When selection ends, the callback function provided to the option stop is fi red. This callback func-

tion sets the property finder.selectingFiles to false so that selection of individual fi les or directo-

ries using the mousedown event you set up previously can again take place.

stop : function(event, ui)

{

finder.selectingFiles = false;

},

While selection is happening, the callback function provided to the option selecting is continuously

fi red. The objects that are experiencing a selection are provided to you and described in the selector

passed in the ui.selecting property. Those items are in turn selected by calling selectFile() on the

individual item or collection of items.

selecting : function(event, ui)

{

$(ui.selecting).selectFile();

},