CAF.Droppable Class

The CAF.Droppable class encapsulates and extends the functionality of the Scriptaculous Effects Droppables.add() method. Instead of using the Droppables.add() method and its options to register an element, similar to the following:

You can use a syntax that mirrors that of the Draggable object constructor as in the following example:

Object.extend(new CAF.Droppable(id), {
onDrop: function(src, dst) {
CAF.Droppable.prototype.onDrop.apply(this, arguments);
CAF.Draggable.current.result = ""; // cancel move
}
});

The CAF.Droppable onDrop() method copies the value of sub-controls with the same local ID from the dropped element into the sub-controls of the CAF.Droppable's target element, the drop target.

Note:

You can have multiple controls that use the same ID, as long as each of those controls are in a different naming-container. For more information, see Control ID Reference.

For example, you have two DIV tags, each in a different naming-container, each with three text controls. The the first DIV is the target of a CAF.Draggable object. The second the target of a CAF.Droppable. The IDs of the text controls in the first DIV are name, description, and notes. The IDs of the text controls in the second DIV are item-number, name, and description. If the user drags and drops the first DIV onto the second, the CAF.Droppable's onDrop() method copies the first DIV's name and description text control values to the name and description text controls of the second, but it does not modify the second DIV's item-number text control.

If the CAF.Droppable's onDropSetValue option is set to true, the onDrop() method copies the value of the dropped control to the value of the target control, ignoring the sub-controls. For example, you have two image elements, the first image is the target of a CAF.Draggable object, the second image is the target of a CAF.Droppable, and with the onDropSetValue option set to true. If the user drags and drops the first image onto the second, the onDrop() method copies the first image control's value, the image element's URL, to the second image.

You can customize a CAF.Droppable object's drop handling by specifying a method for the handleDrop option. This method is invoked by the CAF.Droppable's onDrop() method before it does anything else. The handleDrop callback method is passed the same two arguments as the original onDrop() method,src and dst. The src argument is the dragged (moved) element. The dst argument is the CAF.Droppable's target element. The handler should return true if it fully handled the drop, and false to allow the default onDrop() processing to execute that copies the content of the dropped control to the target control.

The following example demonstrates using a custom handleDrop handler to override the default CAF.Droppables onDrop() behavior. It gets the value of the name sub-control in the dropped control, and sets the drop target control's value to the value of the dropped name sub-control:

new CAF.Droppable(id, {
handleDrop: function(src, dst) {
var rows = CAF.Draggable.rows(src);
if (rows.length) {
var nameId = rows[0].getControlId("name");
if (nameId) {
CAF.model(dst).setValue(CAF.model(nameId).getValue());
}
}
return false;
}
});

The allowDrop option is invoked by the CAF.Droppable's onActivate() method. The allowDrop callback passes two arguments, src and dst. The src argument is the dragged element. The dst argument is the target element, that is the drop target. The handler returns true if the src element is movable, and false if it is not movable.

The following example demonstrates using a custom allowDrop method. It returns true if the drag container contains the phrase my test, and false if it does not contain my test: