Web Development with jQuery®

(^330) ❘ CHAPTER 12 DRAGGABLE AND DROPPABLE
border-radius: 8px;
color: white;
padding: 1px 7px;
}
And as you’ve no doubt come to expect, the JavaScript portion of this example is simple. You start
with code that’s required to make a folder selectable, which is done by adding a mousedown event. A
mousedown event is used instead of, say, a click event, because you want a selection to take place even
if the user moves the mouse cursor outside the boundaries of the folder while the mouse button is
pressed. If users move the cursor while the button is pressed, that causes the element to be dragged.
Because of that, you want the folder to be selected to show users that the folder they are dragging
is selected.
$('div.finderDirectory')
.mousedown(
Inside the mousedown event, you write some logic for selecting the folder. First, you remove the class
name finderIconSelected from the div.finderIconSelect element.
Then you repeat the selection; you remove the class name finderDirectoryNameSelected from the
span.finderDirectoryNameSelected element.
This series of actions clears any previous selection when a new selection is made.
Now add the class names that you removed to the div.finderIcon and span elements that
are selected.
function()
{
$('div.finderIconSelected')
.removeClass('finderIconSelected');
$('span.finderDirectoryNameSelected')
.removeClass('finderDirectoryNameSelected');
$(this).find('div.finderIcon')
.addClass('finderIconSelected');
$(this).find('div.finderDirectoryName span')
.addClass('finderDirectoryNameSelected');
}
Finally, you make each folder draggable by chaining the method draggable() to the call to
mousedown().
.draggable();
The jQuery UI draggable() method lets you move the folders in the document to any position you
like, similar to how Mac OS X’s Finder works by default, enabling you to arrange the folders how-
ever you like. But the jQuery UI draggable() method enables you to do more than this. In the next
section, you learn how to do ghosting and how to add the Droppable API into the mix.
http://www.it-ebooks.info