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