The CAF.Draggable class extends the Scriptaculous Effects Draggable class, providing uniform drag behavior across different types of draggable elements. Unlike the default Draggable behavior, the CAF.Draggable object creates a copy of the element to drag and inserts it into a drag container, ensuring the user drags around the copy of the element and not the original. It uses the CAF.Draggable.duplicateAsHTML() method to generate unique temporary IDs for the dragged element and its children. If you want to override this behavior such as to replace the dragged element content with an image, you could override the startDrag() method to replace the default drag container's content with your custom content:

The CAF.Draggable startDrag() and endDrag() methods also maintain a CAF.Draggable.current object while the drag is in process. The CAF.Draggable.current object has three useful fields:

If the drag ends in a successful drop, and the drop handler is able to duplicate the dragged content, the drop handler sets the CAF.Draggable.current.result field to move. This notifies the CAF.Draggable object that it may delete the original draggable element, effectively performing a move operation. The CAF.Draggable object do this if the CAF.Draggable's move option is set to true.

The CAF.Draggable class also has two static functions, model() and rows(). These are especially useful in drop handler functions (see CAF.Droppable Class) to determine what is in the drag container. The model() method creates the drag container's content as a single element, useful for handling the drop of a simple control such as an image or text control. The rows() method creates the drag container's content as an array of table rows, useful for handling the drop of a complex drop such as a panel containing multiple controls, or a table or a list row.

You should wrap any effects, or drag and drop JavaScript code in an anonymous method, and pass that method to the Library.load() method: