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.'; }});