Scriptaculous Droppables onDrop callback, How to reference each element?

Question

Documentation can be found here

It says in the example:

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.

Then it gives some code

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

It uses the ambiguous word 'element' in the code. My question is, does anyone have a good example on how to reference the draggable element and the droppable element in this callback javascript function?

Answer 1

Going by the example further down the page, the callback function can take as many of the parameters as you need:

onDrop: function() { $('droppable_demo').highlight(); }

In this case, they have used none of the callback parameters. To this end, presumably to access all three as mentioned in the paragraph you quoted, you can define:

onDrop: function(dragged, dropped, event) {  }

Answer 2

I added this example to the documentation...

 Droppables.add('shopping_cart', {
  accept: 'products',
  onDrop: function(dragged, dropped, event) {
    alert('Dragged: ' + dragged.id);
    alert('Dropped onto: ' + dropped.id);
    alert('Held ctrl key: ' + event.ctrlKey);
  }
});