YUI Library: Drag & Drop 2008-2-19 v2.

5
Simple Use Case: Making an Element Draggable Interesting Moments in Drag & Drop Drag & Drop Manager:
myDDobj = new YAHOO.util.DD("myDiv"); Moment Point Mode Intersect Mode Event (e) Properties
onMouseDown e e mousedown clickPixelThresh (i)
Makes the HTML element whose id attribute is "myDiv" draggable.
startDrag x, y x, y n/a clickTimeThresh (i)
onDrag e e mousemove mode either
Constructor (YAHOO.util.DD, DDProxy, DDTarget) onDragEnter e, id e, DDArray mousemove YAHOO.util.DragDropMgr.
onDragOver e, id e, DDArray mousemove POINT or .INTERSECT
YAHOO.util.DD(str | el ref target[, str group name, preventDefault (b)
obj configuration]); onDragOut e, id e, DDArray mousemove
stopPropagation (b)
onDragDrop e, id e, DDArray mouseup
Arguments: useCache (b)
onInvalidDrop e e mouseup
(1) Element: ID or elem. ref. of the element to make draggable;
endDrag e e mouseup
deferral is supported if the element is not yet on the page.
onMouseUp e e mouseup Drag & Drop Manager:
(2) Group Name: An optional string indicating the DD group; DD Methods
These "moments" are exposed as events on your DD instances; they are
objects only "interact with" other objects that share a group.
methods of YAHOO.util.DragDrop. The table above identifies the arguments oDD=instance of DragDrop object
(3) Configuration: An object containing name-value pairs, used to set passed to these methods in Point and Intersect modes.
any of the DD object’s properties. getBestMatch(a [oDDs])
Solutions getDDById(s id)
Properties & Methods of YAHOO.util.DragDrop getLocation(oDD)
Add a drag handle to an exsting DD object: getRelated(oDD, b
Properties: targets only)
Methods: removeInvalid myDDobj.setHandleElId('myDragHandle');
available (b) isDragDrop(s id)
addInvalidHandle HandleId(s id)
dragOnly (b) Set the "padding" or "forgiveness zone" of a DD object: isHandle(s DDId, s
Class (s cssClass) removeInvalidHandle
groups (ar) addInvalidHandleId (s Type (s tagName) myDDobj.setPadding(20, 30, 20, 30); //units are HandleId)
id (s) id) resetConstraints() pixels, top/rt/bt/left isLegalTarget(oDD,
invalidHandle addInvalidHandle setDragElId(s id) oDD target)
Classes (s[ ]) Get the "best match" from an onDragDrop event in Intersect Mode isLocked()
Type (s tagName) setHandleElId (s id)
invalidHandleIds where the dragged element is over more than one target: lock()
addToGroup (s setOuterHandleElId (s
(obj) groupName) id) myDDobj.onDragDrop = function(e, DDArray) { refreshCache()
isTarget (b) clearTicks() setPadding(i top, i oDDBestMatch = swapNode()
maintainOffset (b) clearConstraints() right, i bottom, i YAHOO.util.DragDropMgr.getBestMatch(DDArray);} unlock()
padding (int[ ]) getDragEl() left)
getEl() setXConstraint(i left, i
Override an interesting moment method for a DD object instance: *Note:
primaryButtonOnly
isLocked() right, i tick size) myDDobj = new YAHOO.util.DD("myDiv"); YAHOO.util.DragDropMgr is a
(b) singleton; changes made to its
xTicks (int[ ]) lock() setYConstraint(i up, i myDDobj.startDrag = function(x,y) { properties (such as locking or
yTicks (int[ ]) removeFromGroup(o down, i tick size) this.iStartX = x; this.iStartY = y; unlocking) affect Drag and
dd, s group) unlock() } Drop globally throughout a
removeInvalid unreg() page.
HandleClass(s Change the look and feel of the proxy element at the start of a drag
cssClass) event using YAHOO.util.DDProxy:
myDDobj.startDrag(x,y) { Dependencies
YAHOO.util.Dom.addClass(this.getDragEl(),
Properties & Methods of YAHOO.util.DD & .DDProxy "myCSSClass"); } Drag & Drop
requires the YAHOO
Inherit from YAHOO.util.DragDrop and add the following: Lock Drag and Drop across the whole page: object, DOM, and
YAHOO.util.DragDropMgr.lock(); Event.
YAHOO.util.DD Properties: YAHOO.util.DDProxy
scroll (b) Properties: Switch to Intersect Mode:
centerFrame (b) YAHOO.util.DragDropMgr.mode =
resizeFrame (b) YAHOO.util.DragDropMgr.INTERSECT;