Draggable and Droppable
Beginning with this chapter, the discussion shifts to the jQuery UI library. The jQuery UI
library is a collection of reusable components that enables you create user-interface function-
ality quickly. The jQuery UI library handles a variety of tasks, such as making elements in a
document draggable or making a list of items that you can rearrange by dragging and drop-
ping, and many other UI tasks that you learn about in the remaining chapters of this book.The jQuery UI library is functionality that exists outside jQuery’s core framework you’ve
been using and learning about throughout the preceding chapters of this book. The jQuery
UI library is a series of jQuery plugins that handles these different UI tasks. In the spirit of
jQuery’s API, the library makes certain UI tasks much easier to implement.You can download jQuery UI library components from http://ui.jquery.com/download. The
website enables you to customize your download based on which UI components you want
to use, and it offers this customization so that you can add the least amount of JavaScript
possible, which, in turn, reduces overhead like fi le size and bandwidth. The source code
download for this book is available free from http://www.wrox.com/go/webdevwithjquery and includes
the entire jQuery UI package, which comprises all jQuery UI library plugins. For testing and
learning purposes, this is fi ne; however, if you want to use UI library components in a real,
production website, you should customize your jQuery UI library download to include only
the components that you will use in your application because the entire library is a sizable fi le
weighing in at 229.56 KB packed (all white space, comments, and line breaks removed), or
347.82 KB fully unpacked and uncompressed—a fairly large fi le download.This chapter begins coverage of the jQuery UI library with the Draggable and Droppable
libraries. This contrasts with the coverage presented in Chapter 11, “HTML5 Drag and
Drop,” which presents how to use HTML5’s native drag-and-drop API. The key differences
between the HTML5 drag-and-drop API and the jQuery UI’s Draggable and Droppable API
is that the HTML5 API can be used between multiple, independent browser windows (even
different browser windows of completely different browsers), and even between different
applications, assuming the applications in question use a browser component such as WebKit
(Apple, et al.), Blink (Google, et al.), Gecko (Mozilla), or Trident (Microsoft). HTML5’s drag-
and-drop API also provides the ability to upload one or more fi les via drag-and-drop.