# Yahoo! UI Library

### dd 3.3.0

Yahoo! UI Library > dd > Plugin.DDConstrained
Search:
Filters Show Private Show Protected Show Deprecated

## Class Plugin.DDConstrained - extends Base

Plugin for the dd-drag module to add the constraining methods to it. It supports constraining to a node or viewport. It supports tick based moves and XY axis constraints.

### Constructor

Plugin.DDConstrained `( )`

### Properties

#### _regionCache - `private Object`

Store a cache of the region that we are constraining to

#### NS - `protected static {String}`

The Constrained instance will be placed on the Drag instance under the con namespace.
Default Value: con

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

### Methods

#### _cacheRegion

`private void _cacheRegion ( )`
Get's the region and caches it, called from window.resize and when the cache is null

#### _checkRegion

`private Array _checkRegion ( _xy )`
Check if xy is inside a given region, if not change to it be inside.

Parameters:
  `_xy <Array>` 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.

Returns: `Array`
  The new XY that is inside the region

#### _checkTicks

`private Array _checkTicks ( xy , r )`
This method delegates the proper helper method for tick calculations

Parameters:
  `xy <Array>` The XY coords for the Drag
  `r <Object>` The optional region that we are bound to.

Returns: `Array`
  The calced XY coords

#### _createEvents

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

#### _getConstraint

`private void _getConstraint ( )`
Standardizes the 'constraint' attribute

#### _handleEnd

`private void _handleEnd ( )`
Fires on drag:end

#### _handleStart

`private void _handleStart ( )`
Fires on drag:start and clears the _regionCache

#### _tickAlignX

`private void _tickAlignX ( )`
Fires when the actXY[0] reach a new value respecting the tickX gap.

#### _tickAlignY

`private void _tickAlignY ( )`
Fires when the actXY[1] reach a new value respecting the tickY gap.

#### align

`void align ( )`
Modifies the Drag.actXY method from the after drag:align event. This is where the constraining happens.

#### drag

`void drag ( )`
Fires after drag:drag. Handle the tickX and tickX align events.

#### getRegion

`Object getRegion ( inc )`
Get the active region: viewport, node, custom region

Parameters:
  `inc <Boolean>` Include the node's height and width

#### inRegion

`Boolean inRegion ( xy )`
Checks if the XY passed or the dragNode is inside the active region.

Parameters:
  `xy <Array>` Optional XY to check, if not supplied this.get('dragNode').getXY() is used.

Returns: `Boolean`
  True if the XY is inside the region, false otherwise.

#### resetCache

`void resetCache ( )`
Reset the internal region cache.

#### Methods inherited from EventTarget:

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

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _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, hasPlugin, plug, unplug`

#### Methods inherited from Base:

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

### Events

#### cacheRegionChange

`cacheRegionChange ( event )`
Fires when the value for the configuration attribute 'cacheRegion' 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

#### constrain2nodeChange

`constrain2nodeChange ( event )`
Fires when the value for the configuration attribute 'constrain2node' 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

#### constrain2regionChange

`constrain2regionChange ( event )`
Fires when the value for the configuration attribute 'constrain2region' 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

#### constrain2viewChange

`constrain2viewChange ( event )`
Fires when the value for the configuration attribute 'constrain2view' 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

#### constrainChange

`constrainChange ( event )`
Fires when the value for the configuration attribute 'constrain' 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:tickAlignX

`drag:tickAlignX ( event )`
Fires when this node is aligned with the tickX value.

Parameters:
  `event <Event.Facade>` An Event Facade object

#### drag:tickAlignY

`drag:tickAlignY ( event )`
Fires when this node is aligned with the tickY value.

Parameters:
  `event <Event.Facade>` An Event Facade object

#### gutterChange

`gutterChange ( event )`
Fires when the value for the configuration attribute 'gutter' 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

#### stickXChange

`stickXChange ( event )`
Fires when the value for the configuration attribute 'stickX' 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

#### stickYChange

`stickYChange ( event )`
Fires when the value for the configuration attribute 'stickY' 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

#### tickXArrayChange

`tickXArrayChange ( event )`
Fires when the value for the configuration attribute 'tickXArray' 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

#### tickXChange

`tickXChange ( event )`
Fires when the value for the configuration attribute 'tickX' 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

#### tickYArrayChange

`tickYArrayChange ( event )`
Fires when the value for the configuration attribute 'tickYArray' 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

#### tickYChange

`tickYChange ( event )`
Fires when the value for the configuration attribute 'tickY' 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

#### cacheRegion `- Boolean`

Should the region be cached for performace. Default: true

#### constrain `- {String/Object/Node}`

Will attempt to constrain the drag node to the boundaries. Arguments:
'view': Contrain to Viewport
'#selector_string': Constrain to this node
'{Region Object}': An Object Literal containing a valid region (top, right, bottom, left) of page positions

#### constrain2node `- Object`

Will attempt to constrain the drag node to the boundaries of this node.
Deprecated

#### constrain2region `- Object`

An Object Literal containing a valid region (top, right, bottom, left) of page positions to constrain the drag node to.
Deprecated

#### constrain2view `- Object`

Will attempt to constrain the drag node to the boundaries of the viewport region.
Deprecated

#### gutter `- String`

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)

#### stickX `- Boolean`

Stick the drag movement to the X-Axis. Default: false

#### stickY `- Boolean`

Stick the drag movement to the Y-Axis

#### tickX `- Number/false`

The X tick offset the drag node should snap to on each drag move. False for no ticks. Default: false

#### tickXArray `- Array`

An array of page coordinates to use as X ticks for drag movement.

#### tickY `- Number/false`

The Y tick offset the drag node should snap to on each drag move. False for no ticks. Default: false

#### tickYArray `- Array`

An array of page coordinates to use as Y ticks for drag movement.

#### Configuration attributes inherited from Base:

`destroyed initialized`

Copyright © 2011 Yahoo! Inc. All rights reserved.