Class DD.Drag
- extends Base
- Known Subclasses:
-
Plugin.Drag
This class provides the ability to drag a Node.
Properties
Holder for the setTimeout call
Private flag to see if the drag threshhold was met
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
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
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
A private hash of the default invalid selector strings: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true}
The getTime of the mousedown event. Not used, just here in case someone wants/needs to use it.
The xy that the node will be set to. Changing this will alter the position as it's dragged.
The offset of the mouse position to the element's position
The position of the element as it's moving (for offset calculations)
The XY coords of the mousemove
The initial element position
The real xy position of the node.
A region object associated with this drag, used for checking regions while dragging.
The initial mouse position
This will be a reference to the Drop instance associated with this drag if the target: true config attribute is set..
Properties inherited from Base:
Methods
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.
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.
private
void
_createEvents
(
)
This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
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.
private
void
_defDragFn
(
ev
)
Default function for drag:drag. Fired from _moveNode.
- Parameters:
-
ev
<Event.Facade>
The drag:drag event
private
void
_defMouseDownFn
(
)
Handler for the mousedown DOM event
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.
private
void
_fixIEMouseDown
(
)
This method copies the onselectstart listner on the document to the _ieSelectFix property
private
void
_fixIEMouseUp
(
)
This method copies the _ieSelectFix property back to the onselectstart listner on the document.
private
void
_handleMouseDownEvent
(
)
Handler for the mousedown DOM event
private
void
_handleMouseUp
(
)
Handler for the mouseup DOM event
private
Boolean/Object
_handleTarget
(
)
Attribute handler for the target config attribute.
private
void
_ieSelectFix
(
)
The function we use as the onselectstart handler when we start a drag in Internet Explorer
private
void
_move
(
ev
)
Fired from DragDropMgr (DDM) on mousemove.
- Parameters:
-
ev
<Event.Facade>
The mousemove DOM event
private
void
_moveNode
(
)
This method performs the actual element move.
private
void
_prep
(
)
Attach event listners and add classname
private
void
_prevEndFn
(
)
Handler for preventing the drag:end event. It will reset the node back to it's start position
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.
private
void
_timeoutCheck
(
)
The method passed to setTimeout to determine if the clickTimeThreshold was met.
private
void
_unprep
(
)
Detach event listeners and remove classname
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.
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.
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.
private
void
destructor
(
)
Lifecycle destructor, unreg the drag from the DDM and remove listeners
Self
end
(
)
Ends the drag operation
Chainable: This method is chainable.
private
void
initializer
(
)
Internal init handler
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.
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.
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.
Self
start
(
)
Starts the drag operation
Chainable: This method is chainable.
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.
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,
_parseType,
addTarget,
after,
before,
bubble,
detach,
detachAll,
fire,
getEvent,
on,
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 Base:
_aggregateAttrs,
_defDestroyFn,
_defInitFn,
_destroyHierarchy,
_filterAttrCfs,
_getAttrCfgs,
_getClasses,
_initHierarchy,
_initHierarchyData,
destroy,
init,
toString
Events
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
(
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
(
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
(
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
(
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
(
)
Fires after a handle is added.
Bubbles: This event bubbles to
DDM.
drag:addInvalid
(
)
Fires after an invalid selector is added.
Bubbles: This event bubbles to
DDM.
drag:afterMouseDown
(
ev
)
Fires after the mousedown event has been cleared.
- Parameters:
-
ev
<Event.Facade>
The mousedown event.
Bubbles: This event bubbles to
DDM.
drag:align
(
)
Fires when this node is aligned.
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
(
)
Fires every mousemove during a drag operation.
Bubbles: This event bubbles to
DDM.
drag:drophit
(
)
Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)
Bubbles: This event bubbles to
DDM.
drag:dropmiss
(
)
Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)
Bubbles: This event bubbles to
DDM.
drag:end
(
)
Fires at the end of a drag operation.
Bubbles: This event bubbles to
DDM.
drag:enter
(
)
Fires when this node enters a Drop Target. (Fired from dd-drop)
Bubbles: This event bubbles to
DDM.
drag:exit
(
)
Fires when this node exits a Drop Target. (Fired from dd-drop)
Bubbles: This event bubbles to
DDM.
drag:mouseDown
(
ev
)
Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
- Parameters:
-
ev
<Event.Facade>
The 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
(
)
Fires when this node is over a Drop Target. (Fired from dd-drop)
Bubbles: This event bubbles to
DDM.
drag:removeHandle
(
)
Fires after a handle is removed.
Bubbles: This event bubbles to
DDM.
drag:removeInvalid
(
)
Fires after an invalid selector is removed.
Bubbles: This event bubbles to
DDM.
drag:start
(
)
Fires at the start of a drag operation.
Bubbles: This event bubbles to
DDM.
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
(
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
(
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
(
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
(
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
(
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
(
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
(
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
(
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
(
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
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
(
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:
Configuration Attributes
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.
Controls the default bubble parent for this Drag instance. Default: Y.DD.DDM. Set to false to disable bubbling.
The number of pixels to move to start a drag operation, default is 3.
The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
A payload holder to store arbitrary data about this drag object, can be used to store any value.
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.
This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of this Drag instance.
Y.Node instanace to use as the draggable element, defaults to node
Array of groups to add this drag into.
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.
Y.Node instanace to use as the element to initiate a drag operation
Offset the drag element by the difference in cursor position: default true
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.
This attribute only works if the dd-drop module has been loaded. It will make this node a drop target as well as draggable.
Use the protective shim on all drag operations: default true. Only works with dd-ddm, not dd-ddm-base.
Configuration attributes inherited from Base: