DragConstained.html revision 4fcbec6145d16637205990699912fb90f6a3807c
<html>
<head>
<title>API: dd DragConstained (YUI Library)</title>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h3>dd <span class="subtitle">3.00PR1</span></h3>
<p>
> DragConstained
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> <label for="showprivate">Show Private</label></span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> <label for="showprotected">Show Protected</label></span>
<span id="classopts"><input type="checkbox" name="showdeprecated" id="showdeprecated" /> <label for="showdeprecated">Show Deprecated</label></span>
</form>
<h2>
Class <b>DragConstained</b>
<span class="extends">
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<div class="summary description">
This class extends the dd-drag module to add the constraining methods to it. It supports constraining to a region, node or viewport. It also
supports tick based moves and XY axis constraints.
</div>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>DragConstained</strong>
<code>
(
)
</code>
<div class="description">
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private">
<h4><a name="property__regionCache">_regionCache</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
Store a cache of the region that we are constraining to
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="private" href="Drag.html#property__clickTimeout">_clickTimeout</a><span class="private">,</span>
<a class="private" href="Drag.html#property__dragThreshMet">_dragThreshMet</a><span class="private">,</span>
<a class="private" href="Drag.html#property__fromTimeout">_fromTimeout</a><span class="private">,</span>
<a class="private" href="Drag.html#property__ieSelectBack">_ieSelectBack</a><span class="private">,</span>
<a class="private" href="Drag.html#property__invalidsDefault">_invalidsDefault</a><span class="private">,</span>
<a class="private" href="Drag.html#property__startTime">_startTime</a><span class="private">,</span>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
</code>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="private">
<h4>
<a name="method__align">_align</a></h4>
<div class="detail">
<code>
private
Array
<strong>_align</strong>
(
xy
)
</code>
<div class="description">
Override of Drag _align to account for region checking and tick checking
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>xy <Array></code>
The XY to check for ticks and region
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>The modified XY coords.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__cacheRegion">_cacheRegion</a></h4>
<div class="detail">
<code>
private
void
<strong>_cacheRegion</strong>
(
)
</code>
<div class="description">
Get's the region and caches it, called from window.resize and when the cache is null
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__calcTickArray">_calcTickArray</a></h4>
<div class="detail">
<code>
private
void
<strong>_calcTickArray</strong>
(
pos
,
ticks
,
off1
,
off2
)
</code>
<div class="description">
This method is used with the tickXArray and tickYArray config options
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>pos <Number></code>
The current X or Y position
</dd>
<dd>
<code>ticks <Number></code>
The array containing our custom tick positions.
</dd>
<dd>
<code>off1 <Number></code>
The min offset that we can't pass (region)
</dd>
<dd>
<code>off2 <Number></code>
The max offset that we can't pass (region)
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd>The tick position</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__calcTicks">_calcTicks</a></h4>
<div class="detail">
<code>
private
Number
<strong>_calcTicks</strong>
(
pos
,
start
,
tick
,
off1
,
off2
)
</code>
<div class="description">
Helper method to calculate the tick offsets for a given position
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>pos <Number></code>
The current X or Y position
</dd>
<dd>
<code>start <Number></code>
The start X or Y position
</dd>
<dd>
<code>tick <Number></code>
The X or Y tick increment
</dd>
<dd>
<code>off1 <Number></code>
The min offset that we can't pass (region)
</dd>
<dd>
<code>off2 <Number></code>
The max offset that we can't pass (region)
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new position based on the tick calculation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__checkRegion">_checkRegion</a></h4>
<div class="detail">
<code>
private
Array
<strong>_checkRegion</strong>
(
_xy
)
</code>
<div class="description">
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>_xy <Array></code>
The XY to check if it's in the current region, if it isn't inside the region, it will reset the xy array to be inside the region.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>The new XY that is inside the region</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__checkTicks">_checkTicks</a></h4>
<div class="detail">
<code>
private
Array
<strong>_checkTicks</strong>
(
xy
,
r
)
</code>
<div class="description">
This method delegates the proper helper method for tick calculations
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>xy <Array></code>
The XY coords for the Drag
</dd>
<dd>
<code>r <Object></code>
The optional region that we are bound to.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>The calced XY coords</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getRegion">getRegion</a></h4>
<div class="detail">
<code>
Object
<strong>getRegion</strong>
(
inc
)
</code>
<div class="description">
Get the active region: viewport, node, custom region
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>inc <Boolean></code>
Include the node's height and width
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Object
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_inRegion">inRegion</a></h4>
<div class="detail">
<code>
Boolean
<strong>inRegion</strong>
(
xy
)
</code>
<div class="description">
Checks if the XY passed or the dragNode is inside the active region.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>xy <Array></code>
Optional XY to check, if not supplied this.get('dragNode').getXY() is used.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>True if the XY is inside the region, false otherwise.</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="private" href="Attribute.html#method__cloneAttVal">_cloneAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__defAttSet">_defAttSet</a><span class="private">,</span> <a class="private" href="Attribute.html#method__fireAttChange">_fireAttChange</a><span class="private">,</span> <a class="private" href="Attribute.html#method__getSubAttVal">_getSubAttVal</a><span class="private">,</span> <a class="protected" href="Attribute.html#method__initAtts">_initAtts</a><span class="protected">,</span> <a class="private" href="Attribute.html#method__initAttVal">_initAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__setSubAttVal">_setSubAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__splitAttrValues">_splitAttrValues</a><span class="private">,</span> <a class="" href="Attribute.html#method_addAtt">addAtt</a><span class="">,</span> <a class="" href="Attribute.html#method_get">get</a><span class="">,</span> <a class="" href="Attribute.html#method_getAtts">getAtts</a><span class="">,</span> <a class="" href="Attribute.html#method_on">on</a><span class="">,</span> <a class="" href="Attribute.html#method_removeAtt">removeAtt</a><span class="">,</span> <a class="" href="Attribute.html#method_set">set</a><span class="">,</span> <a class="" href="Attribute.html#method_setAtts">setAtts</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="private" href="Drag.html#method__align">_align</a><span class="private">,</span> <a class="private" href="Drag.html#method__createEvents">_createEvents</a><span class="private">,</span> <a class="private" href="Drag.html#method__fixIEMouseDown">_fixIEMouseDown</a><span class="private">,</span> <a class="private" href="Drag.html#method__fixIEMouseUp">_fixIEMouseUp</a><span class="private">,</span> <a class="private" href="Drag.html#method__handleMouseDown">_handleMouseDown</a><span class="private">,</span> <a class="private" href="Drag.html#method__handleMouseDownEvent">_handleMouseDownEvent</a><span class="private">,</span> <a class="private" href="Drag.html#method__handleMouseUp">_handleMouseUp</a><span class="private">,</span> <a class="private" href="Drag.html#method__handleTarget">_handleTarget</a><span class="private">,</span> <a class="private" href="Drag.html#method__ieSelectFix">_ieSelectFix</a><span class="private">,</span> <a class="private" href="Drag.html#method__move">_move</a><span class="private">,</span> <a class="private" href="Drag.html#method__moveNode">_moveNode</a><span class="private">,</span> <a class="private" href="Drag.html#method__prep">_prep</a><span class="private">,</span> <a class="private" href="Drag.html#method__setStartPosition">_setStartPosition</a><span class="private">,</span> <a class="private" href="Drag.html#method__timeoutCheck">_timeoutCheck</a><span class="private">,</span> <a class="private" href="Drag.html#method__unprep">_unprep</a><span class="private">,</span> <a class="" href="Drag.html#method_addHandle">addHandle</a><span class="">,</span> <a class="" href="Drag.html#method_addInvalid">addInvalid</a><span class="">,</span> <a class="" href="Drag.html#method_addToGroup">addToGroup</a><span class="">,</span> <a class="private" href="Drag.html#method_destructor">destructor</a><span class="private">,</span> <a class="" href="Drag.html#method_end">end</a><span class="">,</span> <a class="private" href="Drag.html#method_initializer">initializer</a><span class="private">,</span> <a class="" href="Drag.html#method_removeFromGroup">removeFromGroup</a><span class="">,</span> <a class="" href="Drag.html#method_removeHandle">removeHandle</a><span class="">,</span> <a class="" href="Drag.html#method_removeInvalid">removeInvalid</a><span class="">,</span> <a class="" href="Drag.html#method_start">start</a><span class="">,</span> <a class="" href="Drag.html#method_stopDrag">stopDrag</a><span class="">,</span> <a class="" href="Drag.html#method_validClick">validClick</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="protected" href="Base.html#method__defDestroyFn">_defDestroyFn</a><span class="protected">,</span> <a class="protected" href="Base.html#method__defInitFn">_defInitFn</a><span class="protected">,</span> <a class="private" href="Base.html#method__destroyHierarchy">_destroyHierarchy</a><span class="private">,</span> <a class="protected" href="Base.html#method__getClasses">_getClasses</a><span class="protected">,</span> <a class="private" href="Base.html#method__initHierarchy">_initHierarchy</a><span class="private">,</span> <a class="private" href="Base.html#method__prefixEvtType">_prefixEvtType</a><span class="private">,</span> <a class="" href="Base.html#method_after">after</a><span class="">,</span> <a class="" href="Base.html#method_destroy">destroy</a><span class="">,</span> <a class="" href="Base.html#method_fire">fire</a><span class="">,</span> <a class="" href="Base.html#method_init">init</a><span class="">,</span> <a class="" href="Base.html#method_publish">publish</a><span class="">,</span> <a class="" href="Base.html#method_subscribe">subscribe</a><span class="">,</span> <a class="" href="Base.html#method_toString">toString</a><span class="">,</span> <a class="" href="Base.html#method_unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="Base.html#method_unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Event.Target.html#method_addTarget">addTarget</a><span class="">,</span> <a class="" href="Event.Target.html#method_after">after</a><span class="">,</span> <a class="" href="Event.Target.html#method_bubble">bubble</a><span class="">,</span> <a class="" href="Event.Target.html#method_fire">fire</a><span class="">,</span> <a class="" href="Event.Target.html#method_getEvent">getEvent</a><span class="">,</span> <a class="" href="Event.Target.html#method_publish">publish</a><span class="">,</span> <a class="" href="Event.Target.html#method_ready">ready</a><span class="">,</span> <a class="" href="Event.Target.html#method_removeTarget">removeTarget</a><span class="">,</span> <a class="" href="Event.Target.html#method_subscribe">subscribe</a><span class="">,</span> <a class="" href="Event.Target.html#method_unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="Event.Target.html#method_unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="">
<h4>
<a name="event_constrain2nodeChange">constrain2nodeChange</a></h4>
<div class="detail">
<code>
<strong>constrain2nodeChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'constrain2node' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_constrain2regionChange">constrain2regionChange</a></h4>
<div class="detail">
<code>
<strong>constrain2regionChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'constrain2region' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_constrain2viewChange">constrain2viewChange</a></h4>
<div class="detail">
<code>
<strong>constrain2viewChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'constrain2view' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_gutterChange">gutterChange</a></h4>
<div class="detail">
<code>
<strong>gutterChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'gutter' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_stickXChange">stickXChange</a></h4>
<div class="detail">
<code>
<strong>stickXChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'stickX' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_stickYChange">stickYChange</a></h4>
<div class="detail">
<code>
<strong>stickYChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'stickY' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_tickXArrayChange">tickXArrayChange</a></h4>
<div class="detail">
<code>
<strong>tickXArrayChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'tickXArray' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_tickXChange">tickXChange</a></h4>
<div class="detail">
<code>
<strong>tickXChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'tickX' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_tickYArrayChange">tickYArrayChange</a></h4>
<div class="detail">
<code>
<strong>tickYArrayChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'tickYArray' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_tickYChange">tickYChange</a></h4>
<div class="detail">
<code>
<strong>tickYChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'tickY' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Drag.html#event_activeHandleChange">activeHandleChange</a><span class="">,</span> <a class="" href="Drag.html#event_clickPixelThreshChange">clickPixelThreshChange</a><span class="">,</span> <a class="" href="Drag.html#event_clickTimeThreshChange">clickTimeThreshChange</a><span class="">,</span> <a class="" href="Drag.html#event_dataChange">dataChange</a><span class="">,</span> <a class="" href="Drag.html#event_drag:addHandle">drag:addHandle</a><span class="">,</span> <a class="" href="Drag.html#event_drag:addInvalid">drag:addInvalid</a><span class="">,</span> <a class="" href="Drag.html#event_drag:afterMouseDown">drag:afterMouseDown</a><span class="">,</span> <a class="" href="Drag.html#event_drag:drag">drag:drag</a><span class="">,</span> <a class="" href="Drag.html#event_drag:drophit">drag:drophit</a><span class="">,</span> <a class="" href="Drag.html#event_drag:dropmiss">drag:dropmiss</a><span class="">,</span> <a class="" href="Drag.html#event_drag:end">drag:end</a><span class="">,</span> <a class="" href="Drag.html#event_drag:enter">drag:enter</a><span class="">,</span> <a class="" href="Drag.html#event_drag:exit">drag:exit</a><span class="">,</span> <a class="" href="Drag.html#event_drag:mouseDown">drag:mouseDown</a> <a class="" href="Drag.html#event_drag:over">drag:over</a> <a class="" href="Drag.html#event_drag:removeHandle">drag:removeHandle</a> <a class="" href="Drag.html#event_drag:removeInvalid">drag:removeInvalid</a> <a class="" href="Drag.html#event_drag:start">drag:start</a> <a class="" href="Drag.html#event_draggingChange">draggingChange</a> <a class="" href="Drag.html#event_dragModeChange">dragModeChange</a> <a class="" href="Drag.html#event_dragNodeChange">dragNodeChange</a> <a class="" href="Drag.html#event_groupsChange">groupsChange</a> <a class="" href="Drag.html#event_handlesChange">handlesChange</a> <a class="" href="Drag.html#event_lockChange">lockChange</a> <a class="" href="Drag.html#event_moveChange">moveChange</a> <a class="" href="Drag.html#event_nodeChange">nodeChange</a> <a class="" href="Drag.html#event_offsetNodeChange">offsetNodeChange</a> <a class="" href="Drag.html#event_primaryButtonOnlyChange">primaryButtonOnlyChange</a> <a class="" href="Drag.html#event_targetChange">targetChange</a> <a class="" href="Drag.html#event_useShimChange">useShimChange</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Base.html#event_destroy">destroy</a><span class="">,</span> <a class="" href="Base.html#event_destroyedChange">destroyedChange</a><span class="">,</span> <a class="" href="Base.html#event_init">init</a><span class="">,</span> <a class="" href="Base.html#event_initializedChange">initializedChange</a><span class="">,</span>
</code>
</div>
</div>
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="">
<h4><a name="config_constrain2node">constrain2node</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
Will attempt to constrain the drag node to the bounderies of this node.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_constrain2region">constrain2region</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
An Object Literal containing a valid region (top, right, bottom, left) of page positions to constrain the drag node to.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_constrain2view">constrain2view</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
Will attempt to constrain the drag node to the bounderies of the viewport region.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_gutter">gutter</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
CSS style string for the gutter of a region (supports negative values): '5 0' (sets top and bottom to 5px, left and right to 0px), '1 2 3 4' (top 1px, right 2px, bottom 3px, left 4px)
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_stickX">stickX</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Stick the drag movement to the X-Axis. Default: false
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_stickY">stickY</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Stick the drag movement to the Y-Axis
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_tickX">tickX</a>
</h4>
<div class="detail">
<div class="description">
The X tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_tickXArray">tickXArray</a>
<code>- Array</code>
</h4>
<div class="detail">
<div class="description">
An array of page coordinates to use as X ticks for drag movement.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_tickY">tickY</a>
</h4>
<div class="detail">
<div class="description">
The Y tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_tickYArray">tickYArray</a>
<code>- Array</code>
</h4>
<div class="detail">
<div class="description">
An array of page coordinates to use as Y ticks for drag movement.
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Drag.html#config_activeHandle">activeHandle</a><span class="">,</span> <a class="" href="Drag.html#config_clickPixelThresh">clickPixelThresh</a><span class="">,</span> <a class="" href="Drag.html#config_clickTimeThresh">clickTimeThresh</a><span class="">,</span> <a class="" href="Drag.html#config_data">data</a><span class="">,</span> <a class="" href="Drag.html#config_dragging">dragging</a><span class="">,</span> <a class="" href="Drag.html#config_dragMode">dragMode</a><span class="">,</span> <a class="" href="Drag.html#config_dragNode">dragNode</a><span class="">,</span> <a class="" href="Drag.html#config_groups">groups</a><span class="">,</span> <a class="" href="Drag.html#config_handles">handles</a><span class="">,</span> <a class="" href="Drag.html#config_lock">lock</a><span class="">,</span> <a class="" href="Drag.html#config_move">move</a><span class="">,</span> <a class="" href="Drag.html#config_node">node</a><span class="">,</span> <a class="" href="Drag.html#config_offsetNode">offsetNode</a><span class="">,</span> <a class="" href="Drag.html#config_primaryButtonOnly">primaryButtonOnly</a> <a class="" href="Drag.html#config_target">target</a> <a class="" href="Drag.html#config_useShim">useShim</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Base.html#config_destroyed">destroyed</a><span class="">,</span> <a class="" href="Base.html#config_initialized">initialized</a><span class="">,</span>
</code>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#property__regionCache">_regionCache</a>
<!--<code><Object></code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="private"><!--<code>Array</code>-->
<a href="#method__align">_align</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__cacheRegion">_cacheRegion</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__calcTickArray">_calcTickArray</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#method__calcTicks">_calcTicks</a>
</li>
<li class="private"><!--<code>Array</code>-->
<a href="#method__checkRegion">_checkRegion</a>
</li>
<li class="private"><!--<code>Array</code>-->
<a href="#method__checkTicks">_checkTicks</a>
</li>
<li class=""><!--<code>Object</code>-->
<a href="#method_getRegion">getRegion</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_inRegion">inRegion</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="">
<a href="#event_constrain2nodeChange">constrain2nodeChange</a>
</li>
<li class="">
<a href="#event_constrain2regionChange">constrain2regionChange</a>
</li>
<li class="">
<a href="#event_constrain2viewChange">constrain2viewChange</a>
</li>
<li class="">
<a href="#event_gutterChange">gutterChange</a>
</li>
<li class="">
<a href="#event_stickXChange">stickXChange</a>
</li>
<li class="">
<a href="#event_stickYChange">stickYChange</a>
</li>
<li class="">
<a href="#event_tickXArrayChange">tickXArrayChange</a>
</li>
<li class="">
<a href="#event_tickXChange">tickXChange</a>
</li>
<li class="">
<a href="#event_tickYArrayChange">tickYArrayChange</a>
</li>
<li class="">
<a href="#event_tickYChange">tickYChange</a>
</li>
</ul>
</div>
<div class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class="">
<a href="#config_constrain2node">constrain2node</a>
</li>
<li class="">
<a href="#config_constrain2region">constrain2region</a>
</li>
<li class="">
<a href="#config_constrain2view">constrain2view</a>
</li>
<li class="">
<a href="#config_gutter">gutter</a>
</li>
<li class="">
<a href="#config_stickX">stickX</a>
</li>
<li class="">
<a href="#config_stickY">stickY</a>
</li>
<li class="">
<a href="#config_tickX">tickX</a>
</li>
<li class="">
<a href="#config_tickXArray">tickXArray</a>
</li>
<li class="">
<a href="#config_tickY">tickY</a>
</li>
<li class="">
<a href="#config_tickYArray">tickYArray</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright © 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>