Summary (^) ❘ 337
named ui; then the ui.draggable object gives you access to the element that has been dragged and
dropped on this element. If you’d like to examine the ui object in its entirety, you can add console.
log(ui); to the code, and the ui object will be output to your browser’s debugging console, where
you can examine everything it contains.
In the callback function that you assign to the drop option, you access the data-path attribute of the
element being dragged, which contains the folder’s absolute path. You could then send that path
on to the server, along with the path of the folder that the dragged folder has been dropped on and
actually move that folder to the new location programmatically. The function ends with the dragged
element being deleted with a call to remove(), which would be the fi nal operation that you would do
upon implementing a drag-and-drop folder UI.
In the preceding examples, you learned how the jQuery UI draggable() and droppable() methods
work in a real-life-oriented demonstration of a drag-and-drop implementation. These methods,
combined with what you learned about the native drag-and-drop API in Chapter 11, provide pow-
erful and fl exible methods of implementing drag and drop in a browser or application utilizing a
browser component.
NOTE A comprehensive jQuery UI Draggable and Droppable reference is
available in Appendix J, including all the options that you can pass to both the
draggable() and droppable() methods and the ui object that you can optionally
specify in the second argument to draggable and droppable event handlers.
Summary
In this chapter, you learned how to use the jQuery UI Draggable and Droppable plugins, which you
can download à la carte from http://www.jquery.com. The jQuery website provides à la carte downloading
for UI components so that you can include only the plugins that you need to use, which, in turn,
helps keep your applications lean and effi cient.Throughout this chapter, you worked on building a fi le component similar to the one found in Mac
OS X’s Finder and saw how you can make folders into draggable elements as well as drop zones for
draggable elements. You saw how you can control the nuisances of a drag-and-drop implementation
via the options that jQuery UI allows you to pass to both the draggable() and droppable() methods,
which help you to control what kind of drag operation you want, what the drag element looks like,
what the drop element looks like, and the event handlers you can specify to execute code during spe-
cifi c events that take place during a drag-and-drop operation.The next chapter presents another drag-and-drop UI concept that jQuery provides called Sortable.