Class YAHOO.util.DragDrop

Package:	YAHOO.util
Class:	DragDrop
Extends:	Object
Subclasses:	DD, DDTarget, Slider
Defined In:	dragdrop.js

Defines the interface and base operation of items that that can be dragged or can be drop targets. It was designed to be extended, overriding the event handlers for startDrag, onDrag, onDragOver, onDragOut. Up to three html elements can be associated with a DragDrop instance:

linked element: the element that is passed into the constructor. This is the element which defines the boundaries for interaction with other DragDrop objects.
handle element(s): The drag operation only occurs if the element that was clicked matches a handle element. By default this is the linked element, but there are times that you will want only a portion of the linked element to initiate the drag operation, and the setHandleElId() method provides a way to define this.
drag element: this represents an the element that would be moved along with the cursor during a drag operation. By default, this is the linked element itself as in YAHOO.util.DD. setDragElId() lets you define a separate element that would be moved, as in YAHOO.util.DDProxy

This class should not be instantiated until the onload event to ensure that the associated elements are available. The following would define a DragDrop obj that would interact with any other DragDrop obj in the "group1" group:

dd = new YAHOO.util.DragDrop("div1", "group1");

Since none of the event handlers have been implemented, nothing would actually happen if you were to run the code above. Normally you would override this class or one of the default implementations, but you can also override the methods you want on an instance of the class...

dd.onDragDrop = function(e, id) {
  alert("dd was dropped on " + id);
}

Public Properties

Property		Defined By
	available : boolean	DragDrop
	The availabe property is false until the linked dom element is accessible.	DragDrop
	config : object	DragDrop
	Configuration attributes passed into the constructor	DragDrop
	groups : string:	DragDrop
	The group defines a logical collection of DragDrop objects that are related. Instances only get events when interact...	DragDrop
	hasOuterHandles : boolean	DragDrop
	By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in...	DragDrop
	id : String	DragDrop
	The id of the element associated with this object. This is what we refer to as the "linked element" because the size...	DragDrop
	invalidHandleClasses : string[]	DragDrop
	An indexted array of css class names for elements that will be ignored if clicked.	DragDrop
	invalidHandleIds : string:	DragDrop
	An associative array of ids for elements that will be ignored if clicked	DragDrop
	invalidHandleTypes : string:	DragDrop
	An associative array of HTML tags that will be ignored if clicked.	DragDrop
	maintainOffset : boolean	DragDrop
	Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its par...	DragDrop
	primaryButtonOnly : boolean	DragDrop
	By default the drag and drop instance will only respond to the primary button click (left button for a right-handed m...	DragDrop
	xTicks : int[]	DragDrop
	Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is ge...	DragDrop
	yTicks : int[]	DragDrop
	Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is gene...	DragDrop

Public Methods

Method		Defined By
	DragDrop(`String id`, `String sGroup`, `object config`)	DragDrop
		DragDrop
	addInvalidHandleClass(`string cssClass`) : void	DragDrop
	Lets you specify a css class of elements that will not initiate a drag	DragDrop
	addInvalidHandleId(`string id`) : void	DragDrop
	Lets you to specify an element id for a child of a drag handle that should not initiate a drag	DragDrop
	addInvalidHandleType(`string tagName`) : void	DragDrop
	Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate...	DragDrop
	addToGroup(`sGroup {string}`) : void	DragDrop
	Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...	DragDrop
	applyConfig() : void	DragDrop
	Applies the configuration parameters that were passed into the constructor. This is supposed to happen at each level ...	DragDrop
	clearConstraints() : void	DragDrop
	Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constrain...	DragDrop
	clearTicks() : void	DragDrop
	Clears any tick interval defined for this instance	DragDrop
	endDrag(`Event e`) : void	DragDrop
	Fired when we are done dragging the object	DragDrop
	getDragEl() : HTMLElement	DragDrop
	Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be as...	DragDrop
	getEl() : HTMLElement	DragDrop
	Returns a reference to the linked element	DragDrop
	init(`id the`, `String sGroup`, `object config`) : void	DragDrop
	Sets up the DragDrop object. Must be called in the constructor of any YAHOO.util.DragDrop subclass	DragDrop
	initTarget(`id the`, `String sGroup`, `object config`) : void	DragDrop
	Initializes Targeting functionality only... the object does not get a mousedown handler.	DragDrop
	isLocked() : boolean	DragDrop
	Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on th...	DragDrop
	isTarget() : void	DragDrop
	By default, all insances can be a drop target. This can be disabled by setting isTarget to false.	DragDrop
	isValidHandleChild(`HTMLElement node`) : boolean	DragDrop
	Checks the tag exclusion list to see if this click should be ignored	DragDrop
	lock() : void	DragDrop
	Lock this instance	DragDrop
	onAvailable() : void	DragDrop
	Override the onAvailable method to do what is needed after the initial position was determined.	DragDrop
	onDrag(`Event e`) : void	DragDrop
	Abstract method called during the onMouseMove event while dragging an object.	DragDrop
	onDragDrop(`Event e`, `String\|DragDrop[] id`) : void	DragDrop
	Abstract method called when this item is dropped on another DragDrop obj	DragDrop
	onDragEnter(`Event e`, `String\|DragDrop[] id`) : void	DragDrop
	Abstract method called when this element fist begins hovering over another DragDrop obj	DragDrop
	onDragOut(`Event e`, `String\|DragDrop[] id`) : void	DragDrop
	Abstract method called when we are no longer hovering over an element	DragDrop
	onDragOver(`Event e`, `String\|DragDrop[] id`) : void	DragDrop
	Abstract method called when this element is hovering over another DragDrop obj	DragDrop
	onInvalidDrop(`Event e`) : void	DragDrop
	Abstract method called when this item is dropped on an area with no drop target	DragDrop
	onMouseDown(`Event e`) : void	DragDrop
	Event handler that fires when a drag/drop obj gets a mousedown	DragDrop
	onMouseUp(`Event e`) : void	DragDrop
	Event handler that fires when a drag/drop obj gets a mouseup	DragDrop
	padding() : void	DragDrop
	The padding configured for this drag and drop object for calculating the drop zone intersection with this object.	DragDrop
	removeFromGroup(`string sGroup`) : void	DragDrop
	Remove's this instance from the supplied interaction group	DragDrop
	removeInvalidHandleClass(`string cssClass`) : void	DragDrop
	Unsets an invalid css class	DragDrop
	removeInvalidHandleId(`string id`) : void	DragDrop
	Unsets an invalid handle id	DragDrop
	removeInvalidHandleType(`string tagName`) : void	DragDrop
	Unsets an excluded tag name set by addInvalidHandleType	DragDrop
	resetConstraints(`boolean maintainOffset`) : void	DragDrop
	resetConstraints must be called if you manually reposition a dd element.	DragDrop
	setDragElId(`id {string}`) : void	DragDrop
	Allows you to specify that an element other than the linked element will be moved with the cursor during a drag	DragDrop
	setHandleElId(`id {string}`) : void	DragDrop
	Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example o...	DragDrop
	setInitialPosition(`int diffX`, `int diffY`) : void	DragDrop
	Stores the initial placement of the linked element.	DragDrop
	setOuterHandleElId(`id the`) : void	DragDrop
	Allows you to set an element outside of the linked element as a drag handle	DragDrop
	setPadding(`int iTop`, `int iRight`, `int iBot`, `int iLeft`) : void	DragDrop
	Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targe...	DragDrop
	setXConstraint(`int iLeft`, `int iRight`, `int iTickSize`) : void	DragDrop
	By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of th...	DragDrop
	setYConstraint(`int iUp`, `int iDown`, `int iTickSize`) : void	DragDrop
	By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element...	DragDrop
	startDrag(`int X`, `int Y`) : void	DragDrop
	Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.	DragDrop
	toString() : string	DragDrop
	toString method	DragDrop
	unlock() : void	DragDrop
	Unlock this instace	DragDrop
	unreg() : void	DragDrop
	Remove all drag and drop hooks for this element	DragDrop

Public Events

This class has no public events.

Property Details

available

public boolean available

The availabe property is false until the linked dom element is accessible.

This property is defined by DragDrop.

config

public object config

Configuration attributes passed into the constructor

This property is defined by DragDrop.

groups

public string: groups

The group defines a logical collection of DragDrop objects that are related. Instances only get events when interacting with other DragDrop object in the same group. This lets us define multiple groups using a single DragDrop subclass if we want.

This property is defined by DragDrop.

hasOuterHandles

public boolean hasOuterHandles

By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in part to work around a bug in some browsers that mis-report the mousedown if the previous mouseup happened outside of the window. This property is set to true if outer handles are defined.

This property is defined by DragDrop.

id

public String id

The id of the element associated with this object. This is what we refer to as the "linked element" because the size and position of this element is used to determine when the drag and drop objects have interacted.

This property is defined by DragDrop.

invalidHandleClasses

public string[] invalidHandleClasses

An indexted array of css class names for elements that will be ignored if clicked.

This property is defined by DragDrop.

invalidHandleIds

public string: invalidHandleIds

An associative array of ids for elements that will be ignored if clicked

This property is defined by DragDrop.

invalidHandleTypes

public string: invalidHandleTypes

An associative array of HTML tags that will be ignored if clicked.

This property is defined by DragDrop.

maintainOffset

public boolean maintainOffset

Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its parent to stay the same when the page changes

This property is defined by DragDrop.

primaryButtonOnly

public boolean primaryButtonOnly

By default the drag and drop instance will only respond to the primary button click (left button for a right-handed mouse). Set to true to allow drag and drop to start with any mouse click that is propogated by the browser

This property is defined by DragDrop.

xTicks

public int[] xTicks

Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is generated automatically when you define a tick interval.

This property is defined by DragDrop.

yTicks

public int[] yTicks

Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is generated automatically when you define a tick interval.

This property is defined by DragDrop.

Constructor Details

DragDrop

public function DragDrop(String id, String sGroup, object config)

Parameters:

id : String
of the element that is linked to this instance
sGroup : String
the group of related DragDrop objects
config : object
an object containing configurable attributes Valid properties for DragDrop: padding, isTarget, maintainOffset, primaryButtonOnly

Method Details

addInvalidHandleClass

public function addInvalidHandleClass(string cssClass)

Lets you specify a css class of elements that will not initiate a drag

Parameters:

cssClass : string
the class of the elements you wish to ignore

Returns:

void

This method is defined by DragDrop.

addInvalidHandleId

public function addInvalidHandleId(string id)

Lets you to specify an element id for a child of a drag handle that should not initiate a drag

Parameters:

id : string
the element id of the element you wish to ignore

Returns:

void

This method is defined by DragDrop.

addInvalidHandleType

public function addInvalidHandleType(string tagName)

Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate embedding links within a drag handle that do something other than start the drag.

Parameters:

tagName : string
the type of element to exclude

Returns:

void

This method is defined by DragDrop.

addToGroup

public function addToGroup(sGroup {string})

Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belong to as many groups as needed.

Parameters:

{string} : sGroup
the name of the group

Returns:

void

This method is defined by DragDrop.

applyConfig

public function applyConfig()

Applies the configuration parameters that were passed into the constructor. This is supposed to happen at each level through the inheritance chain. So a DDProxy implentation will execute apply config on DDProxy, DD, and DragDrop in order to get all of the parameters that are available in each object.

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

clearConstraints

public function clearConstraints()

Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

clearTicks

public function clearTicks()

Clears any tick interval defined for this instance

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

endDrag

public function endDrag(Event e)

Fired when we are done dragging the object

Parameters:

e : Event
the mouseup event

Returns:

void

This method is defined by DragDrop.

getDragEl

public function getDragEl()

Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be assigned to another element. An example of this can be found in YAHOO.util.DDProxy

Parameters:

None.

Returns:

HTMLElement
the html element

This method is defined by DragDrop.

getEl

public function getEl()

Returns a reference to the linked element

Parameters:

None.

Returns:

HTMLElement
the html element

This method is defined by DragDrop.

init

public function init(id the, String sGroup, object config)

Sets up the DragDrop object. Must be called in the constructor of any YAHOO.util.DragDrop subclass

Parameters:

the : id
id of the linked element
sGroup : String
the group of related items
config : object
configuration attributes

Returns:

void

This method is defined by DragDrop.

initTarget

public function initTarget(id the, String sGroup, object config)

Initializes Targeting functionality only... the object does not get a mousedown handler.

Parameters:

the : id
id of the linked element
sGroup : String
the group of related items
config : object
configuration attributes

Returns:

void

This method is defined by DragDrop.

isLocked

public function isLocked()

Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)

Parameters:

None.

Returns:

boolean
true if this obj or all drag/drop is locked, else false

This method is defined by DragDrop.

isTarget

public function isTarget()

By default, all insances can be a drop target. This can be disabled by setting isTarget to false.

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

isValidHandleChild

public function isValidHandleChild(HTMLElement node)

Checks the tag exclusion list to see if this click should be ignored

Parameters:

node : HTMLElement
the HTMLElement to evaluate

Returns:

boolean
true if this is a valid tag type, false if not

This method is defined by DragDrop.

lock

public function lock()

Lock this instance

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

onAvailable

public function onAvailable()

Override the onAvailable method to do what is needed after the initial position was determined.

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

onDrag

public function onDrag(Event e)

Abstract method called during the onMouseMove event while dragging an object.

Parameters:

e : Event
the mousemove event

Returns:

void

This method is defined by DragDrop.

onDragDrop

public function onDragDrop(Event e, String|DragDrop[] id)

Abstract method called when this item is dropped on another DragDrop obj

Parameters:

e : Event
the mouseup event
id : String|DragDrop[]
In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.

Returns:

void

This method is defined by DragDrop.

onDragEnter

public function onDragEnter(Event e, String|DragDrop[] id)

Abstract method called when this element fist begins hovering over another DragDrop obj

Parameters:

e : Event
the mousemove event
id : String|DragDrop[]
In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.

Returns:

void

This method is defined by DragDrop.

onDragOut

public function onDragOut(Event e, String|DragDrop[] id)

Abstract method called when we are no longer hovering over an element

Parameters:

e : Event
the mousemove event
id : String|DragDrop[]
In POINT mode, the element id this was hovering over. In INTERSECT mode, an array of dd items that the mouse is no longer over.

Returns:

void

This method is defined by DragDrop.

onDragOver

public function onDragOver(Event e, String|DragDrop[] id)

Abstract method called when this element is hovering over another DragDrop obj

Parameters:

e : Event
the mousemove event
id : String|DragDrop[]
In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.

Returns:

void

This method is defined by DragDrop.

onInvalidDrop

public function onInvalidDrop(Event e)

Abstract method called when this item is dropped on an area with no drop target

Parameters:

e : Event
the mouseup event

Returns:

void

This method is defined by DragDrop.

onMouseDown

public function onMouseDown(Event e)

Event handler that fires when a drag/drop obj gets a mousedown

Parameters:

e : Event
the mousedown event

Returns:

void

This method is defined by DragDrop.

onMouseUp

public function onMouseUp(Event e)

Event handler that fires when a drag/drop obj gets a mouseup

Parameters:

e : Event
the mouseup event

Returns:

void

This method is defined by DragDrop.

padding

public function padding()

The padding configured for this drag and drop object for calculating the drop zone intersection with this object.

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

removeFromGroup

public function removeFromGroup(string sGroup)

Remove's this instance from the supplied interaction group

Parameters:

sGroup : string
The group to drop

Returns:

void

This method is defined by DragDrop.

removeInvalidHandleClass

public function removeInvalidHandleClass(string cssClass)

Unsets an invalid css class

Parameters:

cssClass : string
the class of the element(s) you wish to re-enable

Returns:

void

This method is defined by DragDrop.

removeInvalidHandleId

public function removeInvalidHandleId(string id)

Unsets an invalid handle id

Parameters:

id : string
the id of the element to re-enable

Returns:

void

This method is defined by DragDrop.

removeInvalidHandleType

public function removeInvalidHandleType(string tagName)

Unsets an excluded tag name set by addInvalidHandleType

Parameters:

tagName : string
the type of element to unexclude

Returns:

void

This method is defined by DragDrop.

resetConstraints

public function resetConstraints(boolean maintainOffset)

resetConstraints must be called if you manually reposition a dd element.

Parameters:

maintainOffset : boolean

Returns:

void

This method is defined by DragDrop.

setDragElId

public function setDragElId(id {string})

Allows you to specify that an element other than the linked element will be moved with the cursor during a drag

Parameters:

{string} : id
the id of the element that will be used to initiate the drag

Returns:

void

This method is defined by DragDrop.

setHandleElId

public function setHandleElId(id {string})

Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example of this would be if you have a content div with text and links. Clicking anywhere in the content area would normally start the drag operation. Use this method to specify that an element inside of the content div is the element that starts the drag operation.

Parameters:

{string} : id
the id of the element that will be used to initiate the drag.

Returns:

void

This method is defined by DragDrop.

setInitialPosition

public function setInitialPosition(int diffX, int diffY)

Stores the initial placement of the linked element.

Parameters:

diffX : int
the X offset, default 0
diffY : int
the Y offset, default 0

Returns:

void

This method is defined by DragDrop.

setOuterHandleElId

public function setOuterHandleElId(id the)

Allows you to set an element outside of the linked element as a drag handle

Parameters:

the : id
id of the element that will be used to initiate the drag

Returns:

void

This method is defined by DragDrop.

setPadding

public function setPadding(int iTop, int iRight, int iBot, int iLeft)

Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targeting calculations. Supports css-style shorthand; if only one parameter is passed, all sides will have that padding, and if only two are passed, the top and bottom will have the first param, the left and right the second.

Parameters:

iTop : int
Top pad
iRight : int
Right pad
iBot : int
Bot pad
iLeft : int
Left pad

Returns:

void

This method is defined by DragDrop.

setXConstraint

public function setXConstraint(int iLeft, int iRight, int iTickSize)

By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of the element. Pass in 0,0 for the parameters if you want to lock the drag to the y axis.

Parameters:

iLeft : int
the number of pixels the element can move to the left
iRight : int
the number of pixels the element can move to the right
iTickSize : int
optional parameter for specifying that the element should move iTickSize pixels at a time.

Returns:

void

This method is defined by DragDrop.

setYConstraint

public function setYConstraint(int iUp, int iDown, int iTickSize)

By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element. Pass in 0,0 for the parameters if you want to lock the drag to the x axis.

Parameters:

iUp : int
the number of pixels the element can move up
iDown : int
the number of pixels the element can move down
iTickSize : int
optional parameter for specifying that the element should move iTickSize pixels at a time.

Returns:

void

This method is defined by DragDrop.

startDrag

public function startDrag(int X, int Y)

Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.

Parameters:

X : int
click location
Y : int
click location

Returns:

void

This method is defined by DragDrop.

toString

public function toString()

toString method

Parameters:

None.

Returns:

string
string representation of the dd obj

This method is defined by DragDrop.

unlock

public function unlock()

Unlock this instace

Parameters:

None.

Returns:

void

This method is defined by DragDrop.

unreg

public function unreg()

Remove all drag and drop hooks for this element

Parameters:

None.

Returns:

void

This method is defined by DragDrop.