Droppable

Example

Options

accept

Type

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.

Selector Example

$('#example-accept-selector').droppable({ accept: '.a' })

Function Example

$('#example-accept-function').droppable({ accept: function(el) {
return el.hasClass('b')
} })

activeClass

Type

String

Default

false

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

Example

$('#example-activeClass').droppable({ activeClass: 'active' })

disabled

Type

Boolean

Default

false

Disables the draggable if set to true.

Example

$('#example-disabled').droppable({ disabled: true })

hoverClass

Type

String

Default

false

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

Example

$('#example-hoverClass').droppable({ hoverClass: 'drop-here' })

receiveHandler

Type

Function

Default

null

This function can be used to override the default receive behavior.

Example

$('#example-receiveHandler').droppable({
  receiveHandler: function(ui) {
    $(this).text(ui.item.text())
    ui.item.remove()
  }
})

scope

Type

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.

Example

$('#example-scope').droppable({ scope: 'T' })

Methods

destroy()

Removes the draggable functionality completely.

$('#example-destroy').droppable()
$('#example-destroy').droppable('destroy')

disable()

Disables the draggable.

$('#example-disable').droppable('disable')

enable()

Enables the draggable.

$('#example-enable').droppable('enable')

option()

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

var options = $('#example-option').droppable('option')

option(optionName)

Gets the value currently associated with the specified optionName.

var isDisabled = $('#example-option').droppable('option', 'disabled')

option(optionName, value)

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

$('#example-option').droppable('option', 'disabled', true)

option(options)

Sets one or more options for the droppable.

$('#example-option').droppable('option', { disabled: true })

Events

droppable:activate(event, ui)

Triggered when an accepted draggable starts dragging.

ui.item

the element being dragged

Example

$('#example-activate').droppable({ accept: '.c' })
.on('droppable:activate', function(e, ui) {
alert(42)
})

droppable:create(event)

Triggered when the droppable is created.

droppable:deactivate(event, ui)

Triggered when an accepted draggable stops dragging.

ui.item

the element being dragged

Example

$('#example-deactivate').droppable({ accept: '.e' })
.on('droppable:deactivate', function(e, ui) {
alert(42)
})

droppable:drop(event, ui)

Triggered when an accepted draggable is dropped. Calling

e.preventDefault()

ui.draggable

the element being dragged

ui.item

the new element added to the droppable

Example

$('#example-drop').droppable({ accept: '.g' })
.on('droppable:drop', function(e, ui) {
alert(42)
})

droppable:out(event)

Triggered when an accepted draggable is dragged out of the droppable.

ui.item

the element being dragged

Example

$('#example-out').droppable({ accept: '.i' })
.on('droppable:out', function(e, ui) {
alert(42)
})

droppable:over(event)

Triggered when an accepted draggable is dragged over the droppable.

ui.item

the element being dragged

Example

$('#example-over').droppable({ accept: '.k' })
.on('droppable:over', function(e, ui) {
alert(42)
})