Web Development with jQuery®

(^370) ❘ CHAPTER 14 SELECTABLE
this.selectedFiles = [];
},
As you have read, the ready() method is executed upon the DOMContentLoaded event.
ready : function()
{
Every directory and every fi le receives a mousedown event and is made draggable using jQuery UI’s
Draggable plugin. Every directory is also made a drop target using the Droppable plugin.
$('div.finderDirectory, div.finderFile')
Within the mousedown event, if there is no selection presently underway, which is tracked in the
finder.selectingFiles property, all fi les are unselected, and then whichever fi le element is receiving
the mousedown event is selected.
.mousedown(
function()
{
if (!finder.selectingFiles)
{
finder.unselectSelected();
$(this).selectFile();
}
}
)
The Draggable plugin is enabled by calling the draggable() method; the dragged element is set to
clone the fi le where the drag originated, creating a ghost of the element being dragged. The ghost
element is also set to receive opacity of 50 percent, making it semi-transparent (or semi-opaque,
depending on your view).
.draggable({
helper : 'clone',
opacity : 0.5
});
Even though this example contains only directory objects, you set up the example prepared to deal
with both directory and ordinary fi le objects. Each directory is distinguished from regular fi les via
the class name assigned. The fi nderDirectory class name is given to directories, and the fi nderFile
class name is given to regular fi les.
Directory objects are made droppable using the Droppable jQuery UI plugin; a call to the drop-
pable() method enables a directory as a drop target. As you learned in Chapter 12, jQuery UI is
just one way of implementing drag and drop. The more complicated HTML5 drag-and-drop API is
another option, and it’s the option that I recommend if you need to drag and drop between multiple
browser windows. In the interest of keeping the example simple, I stuck with the simpler jQuery UI
draggable and droppable plugins.
$('div.finderDirectory').droppable({
accept : 'div.finderDirectory, div.finderFile',
hoverClass : 'finderDirectoryDrop',
drop : function(event, ui)
http://www.it-ebooks.info