jQuery UI droppable documentation

## Droppable Widgetversion added: 1.0

Description: Create targets for draggable elements.

## Options

### acceptType: Selector or Function()

Default: `"*"`
Controls which draggable elements are accepted by the droppable.
Multiple types supported:

- Selector: A selector indicating which draggable elements are accepted.
- Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return `true` if the draggable should be accepted.

### activeClassType: String

Default: `false`
If specified, the class will be added to the droppable while an acceptable draggable is being dragged.

### addClassesType: Boolean

Default: `true`
If set to `false`, will prevent the `ui-droppable` class from being added. This may be desired as a performance optimization when calling `.droppable()` init on hundreds of elements.

### disabledType: Boolean

Default: `false`
Disables the droppable if set to `true`.
Code examples:

Initialize the droppable with the disabled option specified:

`$(` `".selector"` `).droppable({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).droppable(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).droppable(` `"option"``,` `"disabled"``,` `true` `);`

### greedyType: Boolean

Default: `false`
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to `true`, any parent droppables will not receive the element.

### hoverClassType: String

Default: `false`
If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.

### scopeType: String

Default: `"default"`
Used to group sets of draggable and droppable items, in addition to the `accept` option. A draggable with the same scope value as a droppable will be accepted.

### toleranceType: String

Default: `"intersect"`
Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

- `"fit"`: Draggable overlaps the droppable entirely.
- `"intersect"`: Draggable overlaps the droppable at least 50% in both directions.
- `"pointer"`: Mouse pointer overlaps the droppable.
- `"touch"`: Draggable overlaps the droppable any amount.

## Methods

### destroy()

Removes the droppable functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

### disable()

Disables the droppable.

- This method does not accept any arguments.

### enable()

Enables the droppable.

- This method does not accept any arguments.

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current droppable options hash.

- This method does not accept any arguments.

### option( optionName, value )

Sets the value of the droppable option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

### option( options )

Sets one or more options for the droppable.

- options
  Type: Object
  A map of option-value pairs to set.

### widget() Returns: jQuery

Returns a `jQuery` object containing the droppable element.

- This method does not accept any arguments.

## Events

### activate( event, ui )

Triggered when an accepted draggable starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.

- event
  Type: Event
- ui
  Type: Object
  - draggable
    Type: jQuery
    A jQuery object representing the draggable element.
  - helper
    Type: jQuery
    A jQuery object representing the helper that is being dragged.
  - position
    Type: Object
    Current CSS position of the draggable helper as `{ top, left }` object.
  - offset
    Type: Object
    Current offset position of the draggable helper as `{ top, left }` object.

### create( event, ui )

Triggered when the droppable is created.

- event
  Type: Event
- ui
  Type: Object

### deactivate( event, ui )

Triggered when an accepted draggable stops dragging.

- event
  Type: Event
- ui
  Type: Object
  - draggable
    Type: jQuery
    A jQuery object representing the draggable element.
  - helper
    Type: jQuery
    A jQuery object representing the helper that is being dragged.
  - position
    Type: Object
    Current CSS position of the draggable helper as `{ top, left }` object.
  - offset
    Type: Object
    Current offset position of the draggable helper as `{ top, left }` object.

### drop( event, ui )

Triggered when an accepted draggable is dropped on the droppable (based on the`tolerance` option).

- event
  Type: Event
- ui
  Type: Object
  - draggable
    Type: jQuery
    A jQuery object representing the draggable element.
  - helper
    Type: jQuery
    A jQuery object representing the helper that is being dragged.
  - position
    Type: Object
    Current CSS position of the draggable helper as `{ top, left }` object.
  - offset
    Type: Object
    Current offset position of the draggable helper as `{ top, left }` object.

### out( event, ui )

Triggered when an accepted draggable is dragged out of the droppable (based on the`tolerance` option).

- event
  Type: Event
- ui
  Type: Object

### over( event, ui )

Triggered when an accepted draggable is dragged over the droppable (based on the`tolerance` option).

- event
  Type: Event
- ui
  Type: Object
  - draggable
    Type: jQuery
    A jQuery object representing the draggable element.
  - helper
    Type: jQuery
    A jQuery object representing the helper that is being dragged.
  - position
    Type: Object
    Current CSS position of the draggable helper as `{ top, left }` object.
  - offset
    Type: Object
    Current offset position of the draggable helper as `{ top, left }` object.

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.

## Example:

#### A pair of draggable and droppable elements.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | `<!doctype html>` `<``html` `lang``=``"en"``>` `<``head``>` `` `<``meta` `charset``=``"utf-8"``>` `` `<``title``>droppable demo</``title``>` `` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"``>` `` `<``style``>` `` `#draggable {` `` `width: 100px;` `` `height: 100px;` `` `background: #ccc;` `` `}` `` `#droppable {` `` `position: absolute;` `` `left: 250px;` `` `top: 0;` `` `width: 125px;` `` `height: 125px;` `` `background: #999;` `` `color: #fff;` `` `padding: 10px;` `` `}` `` `</``style``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.2.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.1/jquery-ui.js"``></``script``>` `</``head``>` `<``body``>` `<``div` `id``=``"droppable"``>Drop here</``div``>` `<``div` `id``=``"draggable"``>Drag me</``div``>` `<``script``>` `$( "#draggable" ).draggable();` `$( "#droppable" ).droppable({` `` `drop: function() {` `` `alert( "dropped" );` `` `}` `});` `</``script``>` `</``body``>` `</``html``>`

#### Demo: