Droppables.add

To make an element react when a Draggable is dropped onto it, you’ll add it to the Droppables of the page with the Droppables.add class method.

Syntax

Droppables.add('id_of_element',[options]);

Options are:

Option | Since | Default | Description
accept | V1.0 | (none) | Set accept to a string or an array of strings describing CSS classes. The Droppable will only accept Draggables that have one or more of these CSS classes.
containment | V1.0 | (none) | The droppable will only accept the Draggable if the Draggable is contained in the given elements (or element ids). Can be a single element or an array of elements. This option is used by Sortables to control Drag-and-Drop between Sortables.
hoverclass | V1.0 | (none) | If set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.
overlap | V1.0 | (none) | If set to ‘horizontal’ or ‘vertical’ the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables.
greedy | V1.1b1 | true | If true stops processing hovering (don’t look for other Droppables that are under the Draggable)

Additionally, following callbacks can be used in the option parameter:

Callback | Since | Description
onHover | V1.0 | Called whenever a Draggable is moved over the Droppable and the Droppable is affected (would accept it). The callback gets three parameters: the Draggable, the Droppable element, and the percentage of overlapping as defined by the overlap option. Used by Sortables.
onDrop | V1.0 | Called whenever a Draggable is released over the Droppable and the Droppable is accepts it. The callback gets three parameters: the Draggable element, the Droppable element and the Event. You can extract additional information about the drop – like if the Ctrl or Shift keys were pressed – from the Event object.

Example

// from the shopping cart demo

Droppables.add('shopping_cart', {

accept: 'products',

onDrop: function(element)

{ $('shopping_cart_text').innerHTML =

'Dropped the ' + element.alt + ' on me.'; }});