Designating Drop Zones for Draggable Elements (^) ❘ 335
In the preceding example, you added the jQuery UI droppable() method to the Finder clone, which
lets you designate areas in which draggable elements can be dropped. The jQuery UI Draggable and
Droppable plugins both work in all modern browsers.
To set up the document for the Droppable library, you added a few rules to the style sheet, which
defi ne what an element looks like while you drag one element over another. From here on, the action
of dragging one element over another element is referred to as the dragover event. jQuery UI simply
refers to this event as over, but the native drag-and-drop API from Chapter 11 refers to this event
as dragover.
In essence, the style that you use for dragover is simply the same style that you’re already using to
highlight a folder to indicate its selection, with just one difference: You swap out the default folder
icon with an open folder icon. In the JavaScript portion, changing the dragover style in the style
sheet is made possible by the addition of the class name, finderDirectoryDrop. This class name is
added to the
the finderDirectoryDrop class name to or from this
style upon dragover.
So, you’re reusing the “selected folder style” for folders where the dragover event is taking place,
with the open folder icon being the only difference. Reusing that style is done simply by adding addi-
tional selectors that reference the
to the style sheet.
div.finderIconSelected,
div.finderDirectoryDrop div.finderIcon {
background-color: rgb(204, 204, 204);
border-radius: 5px;
}
div.finderDirectoryDrop div.finderIcon {
background-image: url('images/Open Folder 48x48.png');
}
div.finderDirectoryName {
text-align: center;
}
span.finderDirectoryNameSelected,
div.finderDirectoryDrop span.finderDirectoryNameSelected {
background: rgb(56, 117, 215);
border-radius: 8px;
color: white;
padding: 1px 7px;
}
The preceding reuses the selected folder style for dragover elements. To replace the default folder
icon with an open folder icon, you use a more specifi c selector. The following selector is used to add
the default folder icon:
div.finderIcon
The following selector overrides the preceding selector when a dragover event is taking place,
providing an open folder icon instead of the default folder icon:
div.finderDirectoryDrop c.finderIcon
http://www.it-ebooks.info