(^336) ❘ CHAPTER 12 DRAGGABLE AND DROPPABLE
Next, you pass a few customizations to the draggable() method to accomplish two things. The
fi rst is that when a user begins to drag a folder icon, you want to use a duplicate of the icon to refer
to the item that is being dragged. The second is to make the duplicate semitransparent. This is an
effect known as ghosting, which creates a UI where when an element is dragged across the screen,
a semitransparent duplicate of that element represents what is dragged, which resembles a ghost in
appearance.
.draggable({
helper : 'clone',
opacity : 0.5
})
The method of passing a JavaScript object literal containing key, value pairs is a common method
used by jQuery plugins to provide customization options. This provides you with fi ne-grained con-
trol over how a plugin works. In the portion of JavaScript that calls droppable(), you pass options
like accept, which lets you fi lter which elements can be dropped on the droppable element by virtue
of a selector.
.droppable({
accept: 'div.finderDirectory',
The next option specifi es what class name is to be added to the drop element when a dragover event
takes place. This option causes the class name finderDirectoryDrop to be added to the
with the class name finderDirectory when a dragover event takes place.
hoverClass: 'finderDirectoryDrop',
In the last option passed to the droppable() method, you specify a function that is executed when
the drop event takes place, which occurs when an element has been dragged over a drop zone and
the mouse button released. Within this function is where you want to do whatever it is the act of
dragging and dropping is intended to provide. In this case, you want to remove the folder being
dropped and then make an AJAX call to the server. On the server side, you have code that actually
moves the folder to the new location.
drop: function(event, ui)
{
var path = ui.draggable.data('path');
// Do something with the path
// For example, make an AJAX call to the server
// where the logic for actually moving the file or folder
// to the new folder would take place
// Remove the element that was dropped.
ui.draggable.remove();
}
});
In the preceding drop event, you can access properties associated with the drag-and-drop opera-
tion by specifying a second argument in the callback function you provide. The second argument is
http://www.it-ebooks.info