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