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.
draggable () method manages
elements of the HTML page you want to move. This method can be used in two
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.
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
method applies. These options can inhibit the displacement for all
items or only some, or even for moving a new item created on the
Table 10-1. Options for managing movable elements
When set to