From jQuery JavaScript Library
« Back to UI/Droppable
droppable( options )
Creates new droppables on the nodeset supplied by the query.
This jQuery plugin makes DOM nodes droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.
All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
- ui.options - options used to initialize the droppable
- ui.position - current position of the draggable helper
- ui.absolutePosition - current absolute position of the draggable helper
- ui.draggable - current draggable element
- ui.helper - current draggable helper
Arguments:| options | Options | |
|---|
| A set of key/value pairs that configure the droppable. All options are optional. |
Options:| Name | Type |
|---|
| accept | Boolean function(draggable) | |
|---|
| This function is called for each draggable on the page, to provide a custom filter. Return true if draggable should be accepted. |
| accept | String | |
|---|
| The string should be a jQuery selector. All draggables that match the selector will be accepted. |
| activeClass | String | |
|---|
| The class that should be added to the droppable while an acceptable draggable is being dragged. |
| greedy | Boolean | |
|---|
| If true, will prevent event propagation on nested droppables. Default value: false. |
| hoverClass | String | |
|---|
| The class that should be added to the droppable while being hovered by an acceptable draggable. |
| tolerance | String | |
|---|
| Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. Default value: 'intersect'. |
| activate | function(e, ui) | |
|---|
| This function is called any time an accepted draggable starts dragging. |
| deactivate | function(e, ui) | |
|---|
| This function is called any time an accepted draggable stops dragging. |
| over | function(e, ui) | |
|---|
| This function is called as an accepted draggable is dragged 'over' (within the tolerance of) this droppable. |
| out | function(e, ui) | |
|---|
| This function is called when an accepted draggable is dragged out (within the tolerance of) this droppable. |
| drop | function(e, ui) | |
|---|
| This function is called when an accepted draggable is dropped 'over' (within the tolerance of) this droppable.
In the callback, $(this) represents the droppable the draggable is dropped on.
$(ui.draggable) represents the draggable. |
droppable( "disable" )
Temporarily disable the droppable functionality.
This method temporarily disables droppable functionality. It can later be reenabled by calling $(..).droppable("enable").
droppable( "enable" )
Enable the droppable functionality.
This method re-enables a previously disabled droppable.
droppable( "destroy" )
Completely remove the droppable functionality.
This method removes the droppable functionality completely.
