Droppables

Behaviours > Droppables

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

Options	Description
accept	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	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	if set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.
overlap	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	boolean, defaults to true, stops processing hovering (don’t look for other Droppables that are under the Draggable)

Callbacks

Callback	Description
onHover	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	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.

Examples

Droppables.add('shopping_card', {
  accept: 'products',
  onDrop: function(element) {
    $('shopping_cart_text').update('Dropped the ' + element.alt + ' on me.');
  }
});

Removing Droppables

When you delete a Node in the HTML Code that was droppable you will not be able to use any draggable Element. Before you delete a droppable element be sure to remove it first from the Droppables list:

Droppables.remove(element);

Notes

Nested Droppables

If you’re adding droppable elements that have other droppable elements inside of them, make sure that you add the droppables in reverse order of the nesting (i.e. most inner droppable first, then second most inner droppable second).
For example you have a nested list:

<ul>
  <li>Parent
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </li>
</ul>

Make sure that the children get defined as droppables before the parent is.

Demo

Drag me!

Drop here!

Source code of this demo

<style type="text/css">
  div#droppable_container { height:140px; width: 400px; }
  div#draggable_demo { width:60px; height:60px; cursor:move; background:#9fcfba; border:1px solid #666; text-align:center; position:relative; top:30px; line-height:50px; }
  div#droppable_demo { width:160px; height:120px; background:#ffffff; border:5px solid #ccc; text-align:center; position:relative; top:-60px; left:140px; line-height:100px; }
  div#droppable_demo.hover { border:5px dashed #aaa; background:#efefef; }
</style>

<div class="demo" id="droppable_container">
  <div id="draggable_demo" class="draggable">
    Drag me!
  </div>
  
  <div id="droppable_demo">
    Drop here!
  </div>
</div>

<script type="text/javascript">
  new Draggable('draggable_demo', { 
    revert: true 
  });
  
  Droppables.add('droppable_demo', { 
    accept: 'draggable',
    hoverclass: 'hover',
    onDrop: function() { $('droppable_demo').highlight(); }
  });
</script>