Class Plugin.DragConstrained
- extends Base
This is a plugin for the dd-drag module to add the constraining methods to it. It supports constraining to a renodenode or viewport. It anode* supports tick based moves and XY axis constraints.
Constructor
Plugin.DragConstrained
(
)
Properties
Store a cache of the region that we are constraining to
con
- {String}
The Constrained instance will be placed on the Drag instance under the con namespace.
Properties inherited from Base:
Methods
private
void
_cacheRegion
(
)
Get's the region and caches it, called from window.resize and when the cache is null
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
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
private
void
_handleStart
(
)
Fires on drag:start and clears the _regionCache
void
align
(
)
Modifies the Drag.actXY method from the after drag:align event. This is where the constraining happens.
Object
getRegion
(
inc
)
Get the active region: viewport, node, custom region
- Parameters:
-
inc
<Boolean>
Include the node's height and width
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.
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
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
(
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
(
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
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
(
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
(
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
(
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
(
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
(
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
(
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:
Configuration Attributes
Will attempt to constrain the drag node to the boundaries of this node.
An Object Literal containing a valid region (top, right, bottom, left) of page positions to constrain the drag node to.
Will attempt to constrain the drag node to the boundaries of the viewport region.
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)
Stick the drag movement to the X-Axis. Default: false
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
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
An array of page coordinates to use as Y ticks for drag movement.
Configuration attributes inherited from Base: