Enables a user to drop a draggable item onto a control.

This behavior's default drop handling copies the value of child controls with the same local ID from the dropped control into the child controls of the behavior's target control. For example, two block panels each in a different naming-container with three text controls, panel A and panel B. Panel A has a CustomDrag behavior and panel B has a CustomDrop behavior. The IDs of the text controls in panel A are name, description, and notes. The IDs of the text controls in the panel B are item-number, name, and description. If the user drags and drops the panel A into panel B, the Custom Drop behavior copies the Panel A's name and description text control values to the name and description text controls of panel B. The Custom Drop behavior does not modify panel B's item-number text control.

Note:You can have multiple controls with the same ID as long as each of those controls is in a different naming-container. For more information, see "Control ID Reference" in the CAF Development Help.

The Custom Drop behavior in the above example only copies output text control values without providing information about the drag-and-drop event to the server. However, if a hidden input control is added with an id of item-id to each panel, when a user drags the panel A into panel B, the value of this hidden input is copied from panel A to panel B. When the panel B's parent form is submitted, the new value of panel B's hidden input is also submitted to the server, enabling server-side code to do any processing that is needed as a result of the drag-and-drop event.

Server-side processing could include notifying a back-end data store that panel B panel has a new item-id, and to display the new item-number, name, and description that corresponds to the item-id.

If the Custom Drop onDropSetValue attribute is set to true, the Custom Drop behavior changes to copying the value of the dropped control to the value of the Custom Drop behavior's target control, ignoring child controls. This example uses two image controls, the first, image1, has a CustomDrag behavior, and image2 has a CustomDrop behavior with onDropSetValue set to true. The user drags the image1 control onto image2. Because the image2 onDropSetValue behavior property is set to true, the Custom Drop behavior copies the image1 control's value, which is the image URL to image2.

You can specify custom client-side JavaScript code to execute when the user drags a control over the target control (the specified allowDrop handler), and when the user drops another control on the target control (the specified handleDrop handler).

The allowDrop handler is invoked every time a user tries to drag a control over the Custom Drop behavior's target control.

Custom Drop is activated when the dragged control enters the target control's boundaries. Custom Drop receives two arguments, source (src) and destination (dst). The src argument is the dragged HTML element, which is a container for a temporary copy of the original control's main HTML element. The dst argument is the target control's main HTML element.

The handleDrop handler is invoked every time a user tries to drop a control on the Custom Drop behavior's target control, but only if the allowDrop handler returned true or was not specified. It is passed two arguments: src and dst. The src argument is the dragged HTML element, which is a container for a temporary copy of the original control's main HTML element; the dst argument is the target control's main HTML element. The handler should return true if it fully handled the drop, and false to allow the default handleDrop processing to execute (that is, to copy the content of the dropped control to the target control).

For more information, see information about the CAF.Draggable class in the CAF Development Help.