The droppable () Method

The droppable () method manages elements of the HTML page on which you want to drop a moved item. This method can be used in two forms:

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

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

The droppable (options) Method

The droppable (options) method declares that an HTML element can be used as an element in which to deposit other elements. The options parameter is an object for specifying the behavior of the involved elements.

The elements of deposit are those from the list associated with the selector for which the droppable (options) method is called. These options primarily define which elements can be dropped on these elements of deposit, and the behavior of elements when a drop is made.

Managing the behavior of the elements of deposit

Table 10-10 describes the options for the droppable (options) method.

Table 10-10. Options for managing deposit elements




When set to true, disables movement of item over the specified elements and the drop into those elements. If items pass over an unauthorized element, the drop will not be considered until these elements are enabled (by using droppable ("enable")).


Indicates how the draggable element should cover the element of deposit for the drop being accepted. The possible values are "fit" (the draggable element covers the element of deposit in full), "intersect" (half), "touch" (touching), and "point" (the mouse has entered the element of ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.