(^366) ❘ CHAPTER 14 SELECTABLE
}
});
}
};
$(document).ready(
function()
{
finder.ready();
}
);The preceding source code comes together to give you the document that you see in Figure 14-1.
FIGURE 14-1
While this example teaches you how to draw a selection box, you’ll note that you cannot drag
the selection after it is made, even though you have implemented drag-and-drop on the individual
folders. Although this is possible, it is beyond the scope of this example.In this example, you applied the Selectable plugin to the Mac OS X Finder Clone example that you
worked on in Chapter 12, “Draggable and Droppable.” This example incorporates some jQuery
functionality that you learned about in previous chapters to demonstrate how you apply jQuery in a
realistic example.You made a few changes to the style sheet that you created in Chapter 12. You added one additional
rule that gives you the ability to customize the box that’s drawn when a selection is made. jQuery
UI’s default selection box as depicted in the documentation looks like the one used in older operat-
ing systems, like Windows 98, which just provided a dotted box to indicate where the box is being
drawn. In an application like Photoshop, where the selection is oftentimes also animated, this
type of selection is referred to as marching ants because the selection box is made to resemble ants
marching in a line. In this example, you changed the style of that box to look more like the selection
box in Mac OS X.