jQuery UI

Chapter 10. Drag-and-Drop

Drag-and-drop is a common operation in web pages for moving an item (using the mouse to drop the item on another page element). For example, if the page displays images of articles to be purchased, users can drag an item into a cart that symbolizes all the goods to be purchased.

jQuery UI can manage these operations, distinguishing the operation of “drag” (the movement of an object) and the operation of “drop” (the depositing of the item being moved). For this, jQuery UI offers both the draggable () and droppable () methods.

The draggable () Method

The draggable () method manages elements of the HTML page you want to move. This method can be used in two forms:

• $(selector, context).draggable (options)

• $(selector, context).draggable ("action", params)

The draggable (options) Method

The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved.

Specifying the movable elements

Use the options in Table 10-1 to indicate which elements can be moved. By default, these are all elements of the list on which the draggable (options) method applies. These options can inhibit the displacement for all items or only some, or even for moving a new item created on the fly.

Table 10-1. Options for managing movable elements

Option	Function
options.disabled	When set to true, disables the ability to move items. Items cannot be moved until this function is enabled (using the ...