Yahoo! UI Library

dd  3.1.0

Yahoo! UI Library > dd > DD.Drag
Search:
 
Filters

Class DD.Drag - extends Base

Known Subclasses:
Plugin.Drag
Provides the ability to drag a Node.

Constructor

DD.Drag ( )

Properties

_bubbleTargets - private object

The default bubbleTarget for this object. Default: Y.DD.DDM

_clickTimeout - private {Boolean}

Holder for the setTimeout call

_dragThreshMet - private {Boolean}

Private flag to see if the drag threshhold was met

_endTime - private Date

The getTime of the mouseup event. Not used, just here in case someone wants/needs to use it.

_ev_md - private {Event.Facade}

A private reference to the mousedown DOM event

_fromTimeout - private {Boolean}

Flag to determine if the drag operation came from a timeout

_groups - private {Array}

Storage Array for the groups this drag belongs to.

_handles - private {Object}

A private hash of the valid drag handles

_ieSelectBack - private object

We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.

_invalids - private {Object}

A private hash of the invalid selector strings

_invalidsDefault - private {Object}

A private hash of the default invalid selector strings: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true}

_startTime - private Date

The getTime of the mousedown event. Not used, just here in case someone wants/needs to use it.

actXY - {Array}

The xy that the node will be set to. Changing this will alter the position as it's dragged.

deltaXY - {Array}

The offset of the mouse position to the element's position

lastXY - {Array}

The position of the element as it's moving (for offset calculations)

mouseXY - {Array}

The XY coords of the mousemove

nodeXY - {Array}

The initial element position

realXY - {Array}

The real xy position of the node.

region - Object

A region object associated with this drag, used for checking regions while dragging.

startXY - {Array}

The initial mouse position

target - {Object}

This will be a reference to the Drop instance associated with this drag if the target: true config attribute is set..

Properties inherited from Attribute:

Properties inherited from Base:

name

Methods

_align

private void _align ( xy )
Calculates the offsets and set's the XY that the element will move to.
Parameters:
xy <Array> The xy coords to align with.

_alignNode

private void _alignNode ( eXY )
This method performs the alignment before the element move.
Parameters:
eXY <Array> The XY to move the element to, usually comes from the mousemove DOM event.

_createEvents

private void _createEvents ( )
This method creates all the events for this Event Target and publishes them so we get Event Bubbling.

_defAlignFn

private void _defAlignFn ( e )
Calculates the offsets and set's the XY that the element will move to.
Parameters:
e <Event.Facade> The drag:align event.

_defDragFn

private void _defDragFn ( ev )
Default function for drag:drag. Fired from _moveNode.
Parameters:
ev <Event.Facade> The drag:drag event

_defMouseDownFn

private void _defMouseDownFn ( )
Handler for the mousedown DOM event

_fixDragStart

private void _fixDragStart ( )
The function we use as the ondragstart handler when we start a drag in Internet Explorer. This keeps IE from blowing up on images as drag handles.

_fixIEMouseDown

private void _fixIEMouseDown ( )
This method copies the onselectstart listner on the document to the _ieSelectFix property

_fixIEMouseUp

private void _fixIEMouseUp ( )
This method copies the _ieSelectFix property back to the onselectstart listner on the document.

_handleMouseDownEvent

private void _handleMouseDownEvent ( )
Handler for the mousedown DOM event

_handleMouseUp

private void _handleMouseUp ( )
Handler for the mouseup DOM event

_handleTarget

private Boolean/Object _handleTarget ( )
Attribute handler for the target config attribute.

_ieSelectFix

private void _ieSelectFix ( )
The function we use as the onselectstart handler when we start a drag in Internet Explorer

_move

private void _move ( ev )
Fired from DragDropMgr (DDM) on mousemove.
Parameters:
ev <Event.Facade> The mousemove DOM event

_moveNode

private void _moveNode ( )
This method performs the actual element move.

_prep

private void _prep ( )
Attach event listners and add classname

_prevEndFn

private void _prevEndFn ( )
Handler for preventing the drag:end event. It will reset the node back to it's start position

_setStartPosition

private void _setStartPosition ( xy )
Sets the current position of the Element and calculates the offset
Parameters:
xy <Array> The XY coords to set the position to.

_timeoutCheck

private void _timeoutCheck ( )
The method passed to setTimeout to determine if the clickTimeThreshold was met.

_unprep

private void _unprep ( )
Detach event listeners and remove classname

addHandle

Self addHandle ( str )
Add a handle to a drag element. Drag only initiates when a mousedown happens on this element.
Parameters:
str <String> The selector to test for a valid handle. Must be a child of the element.
Chainable: This method is chainable.

addInvalid

Self addInvalid ( str )
Add a selector string to test the handle against. If the test passes the drag operation will not continue.
Parameters:
str <String> The selector to test against to determine if this is an invalid drag handle.
Chainable: This method is chainable.

addToGroup

Self addToGroup ( g )
Add this Drag instance to a group, this should be used for on-the-fly group additions.
Parameters:
g <String> The group to add this Drag Instance to.
Chainable: This method is chainable.

destructor

private void destructor ( )
Lifecycle destructor, unreg the drag from the DDM and remove listeners

end

Self end ( )
Ends the drag operation
Chainable: This method is chainable.

initializer

private void initializer ( )
Internal init handler

removeFromGroup

Self removeFromGroup ( g )
Remove this Drag instance from a group, this should be used for on-the-fly group removals.
Parameters:
g <String> The group to remove this Drag Instance from.
Chainable: This method is chainable.

removeHandle

Self removeHandle ( str )
Remove a Selector added by addHandle
Parameters:
str <String> The selector for the handle to be removed.
Chainable: This method is chainable.

removeInvalid

Self removeInvalid ( str )
Remove an invalid handle added by addInvalid
Parameters:
str <String> The invalid handle to remove from the internal list.
Chainable: This method is chainable.

start

Self start ( )
Starts the drag operation
Chainable: This method is chainable.

stopDrag

Self stopDrag ( )
Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
Chainable: This method is chainable.

validClick

Boolean validClick ( )
Method first checks to see if we have handles, if so it validates the click against the handle. Then if it finds a valid handle, it checks it against the invalid handles list. Returns true if a good handle was used, false otherwise.

Methods inherited from EventTarget:

_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll

Methods inherited from Attribute:

_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs

Methods inherited from Plugin.Host:

_destroyPlugins, _initPlugins, _plug, _unplug, hasPlugin, plug, unplug

Methods inherited from Base:

_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString

Events

activeHandleChange

activeHandleChange ( event )
Fires when the value for the configuration attribute 'activeHandle' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

bubblesChange

bubblesChange ( event )
Fires when the value for the configuration attribute 'bubbles' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

clickPixelThreshChange

clickPixelThreshChange ( event )
Fires when the value for the configuration attribute 'clickPixelThresh' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

clickTimeThreshChange

clickTimeThreshChange ( event )
Fires when the value for the configuration attribute 'clickTimeThresh' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

dataChange

dataChange ( event )
Fires when the value for the configuration attribute 'data' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

drag:addHandle

drag:addHandle ( event )
Fires after a handle is added.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
handle
The handle that was added.
Bubbles: This event bubbles to DDM.

drag:addInvalid

drag:addInvalid ( event )
Fires after an invalid selector is added.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
handle
The handle that was added.
Bubbles: This event bubbles to DDM.

drag:afterMouseDown

drag:afterMouseDown ( event )
Fires after the mousedown event has been cleared.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
ev
The original mousedown event.
Bubbles: This event bubbles to DDM.

drag:align

drag:align ( event )
Fires when this node is aligned.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
pageX
The current node position X.
pageY
The current node position Y.
Bubbles: This event bubbles to DDM.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defAlignFn.

drag:drag

drag:drag ( event )
Fires every mousemove during a drag operation.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
pageX
The current node position X.
pageY
The current node position Y.
scroll
Should a scroll action occur.
info
Object hash containing calculated XY arrays: start, xy, delta, offset
Bubbles: This event bubbles to DDM.

drag:drophit

drag:drophit ( event )
Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
drop
The best guess on what was dropped on.
drag
The drag object at the time of the event.
others
An array of all the other drop targets that was dropped on.
Bubbles: This event bubbles to DDM.

drag:dropmiss

drag:dropmiss ( event )
Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
pageX
The current node position X.
pageY
The current node position Y.
Bubbles: This event bubbles to DDM.

drag:end

drag:end ( event )
Fires at the end of a drag operation.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
pageX
The current node position X.
pageY
The current node position Y.
startTime
The startTime of the event, from the start event.
endTime
The endTime of the event. getTime on the current Date object.
Bubbles: This event bubbles to DDM.

drag:enter

drag:enter ( event )
Fires when this node enters a Drop Target. (Fired from dd-drop)
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
drop
The drop object at the time of the event.
drag
The drag object at the time of the event.
Bubbles: This event bubbles to DDM.

drag:exit

drag:exit ( event )
Fires when this node exits a Drop Target. (Fired from dd-drop)
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
drop
The drop object at the time of the event.
Bubbles: This event bubbles to DDM.

drag:mouseDown

drag:mouseDown ( event )
Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
ev
The original mousedown event.
Bubbles: This event bubbles to DDM.
Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defMouseDownFn.

drag:over

drag:over ( event )
Fires when this node is over a Drop Target. (Fired from dd-drop)
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
drop
The drop object at the time of the event.
drag
The drag object at the time of the event.
Bubbles: This event bubbles to DDM.

drag:removeHandle

drag:removeHandle ( event )
Fires after a handle is removed.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
handle
The handle that was removed.
Bubbles: This event bubbles to DDM.

drag:removeInvalid

drag:removeInvalid ( event )
Fires after an invalid selector is removed.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
handle
The handle that was removed.
Bubbles: This event bubbles to DDM.

drag:start

drag:start ( event )
Fires at the start of a drag operation.
Parameters:
event <Event.Facade> An Event Facade object with the following specific property added:
pageX
The original node position X.
pageY
The original node position Y.
startTime
The startTime of the event. getTime on the current Date object.
Bubbles: This event bubbles to DDM.

draggingChange

draggingChange ( event )
Fires when the value for the configuration attribute 'dragging' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

dragModeChange

dragModeChange ( event )
Fires when the value for the configuration attribute 'dragMode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

dragNodeChange

dragNodeChange ( event )
Fires when the value for the configuration attribute 'dragNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

groupsChange

groupsChange ( event )
Fires when the value for the configuration attribute 'groups' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

handlesChange

handlesChange ( event )
Fires when the value for the configuration attribute 'handles' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

lockChange

lockChange ( event )
Fires when the value for the configuration attribute 'lock' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

moveChange

moveChange ( event )
Fires when the value for the configuration attribute 'move' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

nodeChange

nodeChange ( event )
Fires when the value for the configuration attribute 'node' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

offsetNodeChange

offsetNodeChange ( event )
Fires when the value for the configuration attribute 'offsetNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

primaryButtonOnlyChange

primaryButtonOnlyChange ( event )
Fires when the value for the configuration attribute 'primaryButtonOnly' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

startCenteredChange

startCenteredChange ( event )
Fires when the value for the configuration attribute 'startCentered' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

targetChange

targetChange ( event )
Fires when the value for the configuration attribute 'target' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

useShimChange

useShimChange ( event )
Fires when the value for the configuration attribute 'useShim' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from Base:

destroy, destroyedChange, init, initializedChange,

Configuration Attributes

activeHandle - Node

This config option is set by Drag to inform you of which handle fired the drag event (in the case that there are several handles): default false.

bubbles - Object

Controls the default bubble parent for this Drag instance. Default: Y.DD.DDM. Set to false to disable bubbling. Use bubbleTargets in config
Deprecated  

clickPixelThresh - Number

The number of pixels to move to start a drag operation, default is 3.

clickTimeThresh - Number

The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.

data - Mixed

A payload holder to store arbitrary data about this drag object, can be used to store any value.

dragging - Boolean

This attribute is not meant to be used by the implementor, it is meant to be used as an Event tracker so you can listen for it to change.

dragMode - String

This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of this Drag instance.

dragNode - Node

Y.Node instance to use as the draggable element, defaults to node

groups - Array

Array of groups to add this drag into.

handles - Array

Array of valid handles to add. Adding something here will set all handles, even if previously added with addHandle

lock - Boolean

Set to lock this drag element so that it can't be dragged: default false.

move - Boolean

If this is false, the drag element will not move with the cursor: default true. Can be used to "resize" the element.

node - Node

Y.Node instance to use as the element to initiate a drag operation

offsetNode - Boolean

Offset the drag element by the difference in cursor position: default true

primaryButtonOnly - Boolean

By default a drag operation will only begin if the mousedown occurred with the primary mouse button. Setting this to false will allow for all mousedown events to trigger a drag.

startCentered - Boolean

Center the dragNode to the mouse position on drag:start: default false

target - Boolean

This attribute only works if the dd-drop module has been loaded. It will make this node a drop target as well as draggable.

useShim - Boolean

Use the protective shim on all drag operations: default true. Only works with dd-ddm, not dd-ddm-base.

Configuration attributes inherited from Base:

destroyed initialized
Copyright © 2010 Yahoo! Inc. All rights reserved.