Scriptaculous Droppables onDrop callback; How to refer to each element?

Question

The documentation can be found here.

This example says:

OnDrop: Called whenever Draggable is released over Droppable and Droppable accepts it. The callback receives three parameters: the Draggable element, the Droppable element, and the event. You can extract additional information about drop-like if you pressed the Ctrl or Shift key from the Event object.

Then it gives some code

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

The code uses the ambiguous word "element". My question is: does anyone have a good example of how to reference the drag and drop element in this javascript callback function?

Answer 1

Following the example below the page, the callback function can take as many parameters as you need:

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

In this case, they did not use any of the callback parameters. For this, presumably, for access to all three, as indicated in the paragraph that you indicated, 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);
  }
});