Designing and Implementing Composite Applications : webMethods CAF and OpenCAF Development Help : User Interface Controls Concepts : Client-Side Libraries : CAF.Draggable Class
CAF.Draggable Class
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:
Object.extend(new CAF.Draggable(id), {
startDrag: function(event) {
CAF.Draggable.prototype.startDrag.apply(this, arguments);
var container = this.getDragContainer();
container.innerHTML = "<img
src='http://www.google.com/intl/en_ALL/images/logo.gif'>";
}
});
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:
*draggable- specifies the current draggable object
*element - specifies the original draggable element, not the one in the drag container that is the original drag target
*result - specifies an open-ended string representing the result of the drag operation
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.
Note:  
You must load the scriptaculous effects package before referencing the CAF.Draggable and CAF.Droppable objects. For more information, see Scriptaculous Effects.
You should wrap any effects, or drag and drop JavaScript code in an anonymous method, and pass that method to the Library.load() method:
Library.load('scriptaculous/effects', function() {
new CAF.Draggable(id, { cursor: "move" });
});
Copyright © 2017 Software AG, Darmstadt, Germany.

Product LogoContact Support   |   Community   |   Feedback