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:

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

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

Questions

The onDrop callback is not working for me, I’m using 1.1beta!

Answer: This is a bug, fixed in trunk version 1932 (you can apply the fixes as described there to your 1.1beta1 file, or add a hoverclass:'temp' option to your Droppables.add call as a workaround).

Is there anyway to do an onmouseout sort of callback?

Answer: found my own answer. Just used the onhover callback on the enclosing div. The hard part was I had to add the droppables in the right order. The enclosing div first, the target div second.

Of Interest

When trying to use droppables.add within a loop I had a slight issue with the scope of droppable element. It only seemed to remeber the last elementId, not good when you want four or more drag and drop windows that swap content (slightly similar to Google suggest). by adding another attribute to the callback you are able to reference not only the element being dragged but also the element that is being dropped onto. Solved. The example below is taken from my application where window DIV’s are both draggable and droppable served by a Javascript array. See the callback function has element plus the new droppableElement (can be called anything).

function asignDragAndDrop(idArray)
{
        var windowIdArray = idArray;
        for(i=0;i<windowIdArray.length;i++)
    {
        var windowId = windowIdArray[i];
        //set to be draggable
        new Draggable(windowId,{revert:true});
        //set to be droppable
        Droppables.add(windowId, {accept: 'dragItem',hoverclass: 'drophover',onDrop: function(element, droppableElement)
            {
                var content1 = element.innerHTML;
                var content2 = $(droppableElement.element.id).innerHTML;          
                $(droppableElement.element.id).innerHTML = content1;
                element.innerHTML = content2;
            }
            });
    }
}

Don’t forget to remove dropables

When you delete a Node in the HTML Code that was dropable you can’t use any dragable Element. Before your delete the dropable element you have to remove it from the Droppables List.
Droppables.remove(element)

Beware of 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. This is because the way it checks what droppable to trigger is using a hit test in the order that they were added. So if they’re added as in parent first then children, the parent list item will get triggered before the child. Hence doing not what you’d expect (this is as version 1.5 as bundled in Ruby on Rails 1.0)

And a usage for this is, say you want to make these list items draggable too and you want to move an item plus all it’s children to another parent. An example of this will be posted soon!

Any plans on changing this behaviour? Usually parent is available prior to children, so it would make more sense to proces in LIFO.