dd/js/constrain.js

	constrain.js revision bef5bd55cae040389070d8db272d07e4d896997c
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @module dd
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @submodule dd-constrain
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * 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
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * supports tick based moves and XY axis constraints.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @class DragConstrained
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @extends Drag
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @constructor
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    var DRAG_NODE = 'dragNode',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        OFFSET_HEIGHT = 'offsetHeight',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        OFFSET_WIDTH = 'offsetWidth';
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass    var C = function() {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        C.superclass.constructor.apply(this, arguments);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    };
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    C.NAME = 'dragConstrained';
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    C.ATTRS = {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute stickX
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description Stick the drag movement to the X-Axis. Default: false
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Boolean
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        stickX: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            value: false
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute stickY
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Stick the drag movement to the Y-Axis
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Boolean
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        stickY: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            value: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        },
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        /**
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @attribute tickX
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description The X tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @type Number/false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        tickX: {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            value: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        },
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        /**
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @attribute tickY
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description The Y tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @type Number/false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        tickY: {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            value: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        },
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        /**
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @attribute tickXArray
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description An array of page coordinates to use as X ticks for drag movement.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Array
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        tickXArray: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            value: false
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute tickYArray
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description An array of page coordinates to use as Y ticks for drag movement.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Array
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        tickYArray: {
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass            value: false
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute constrain2region
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description An Object Literal containing a valid region (top, right, bottom, left) of page positions to constrain the drag node to.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Object
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        */
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        constrain2region: {
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass            value: false,
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass            getter: function(r) {
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass                if (Y.Lang.isObject(r)) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    var o = {};
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    Y.mix(o, r);
216633e2ad28e9568a902f3763c3bef052c5f908Dav Glass                    return o;
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                } else {
216633e2ad28e9568a902f3763c3bef052c5f908Dav Glass                    return false;
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                }
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            },
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            setter: function (r) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                if (Y.Lang.isObject(r)) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    if (Y.Lang.isNumber(r.top) && Y.Lang.isNumber(r.right) && Y.Lang.isNumber(r.left) && Y.Lang.isNumber(r.bottom)) {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                        var o = {};
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                        Y.mix(o, r);
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                        return o;
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    } else {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                        return false;
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    }
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                } else if (r !== false) {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                    return false;
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                }
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                return r;
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            }
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        },
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        /**
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        * @attribute gutter
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        * @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)
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        * @type String
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        */
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        gutter: {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            value: '0',
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            setter: function(gutter) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                return Y.DD.DDM.cssSizestoObject(gutter);
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            }
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        },
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        /**
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        * @attribute constrain2node
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        * @description Will attempt to constrain the drag node to the bounderies of this node.
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        * @type Object
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        */
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        constrain2node: {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            value: false,
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            setter: function(n) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                if (!this.get('constrain2region')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    var node = Y.Node.get(n);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    if (node) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                        return node;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                } else if (this.get('constrain2region') !== false) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                return false;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute constrain2view
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description Will attempt to constrain the drag node to the bounderies of the viewport region.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Object
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        constrain2view: {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            value: false
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    };
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    var proto = {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        start: function() {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            C.superclass.start.apply(this, arguments);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            this._regionCache = null;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @private
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @property _regionCache
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Store a cache of the region that we are constraining to
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Object
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        _regionCache: null,
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @private
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @method _cacheRegion
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Get's the region and caches it, called from window.resize and when the cache is null
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        _cacheRegion: function() {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            this._regionCache = this.get('constrain2node').get('region');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @method getRegion
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Get the active region: viewport, node, custom region
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @param {Boolean} inc Include the node's height and width
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @return {Object}
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        getRegion: function(inc) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            var r = {};
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (this.get('constrain2node')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                if (!this._regionCache) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    Y.on('resize', this._cacheRegion, this, true, window);
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                    this._cacheRegion();
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                }
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                r = Y.clone(this._regionCache);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            } else if (this.get('constrain2region')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                r = this.get('constrain2region');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            } else if (this.get('constrain2view')) {
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                r = this.get('node').get('viewportRegion');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            } else {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                return false;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            var g = this.get('gutter');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            Y.each(g, function(i, n) {
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                if ((n == 'right') || (n == 'bottom')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    r[n] -= i;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                } else {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    r[n] += i;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            });
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (inc) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                var oh = this.get(DRAG_NODE).get(OFFSET_HEIGHT),
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    ow = this.get(DRAG_NODE).get(OFFSET_WIDTH);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                r.right = r.right - ow;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                r.bottom = r.bottom - oh;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            return r;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @private
        * @method _checkRegion
        * @description
        * @param {Array} _xy 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.
        * @return {Array} The new XY that is inside the region
        */
        _checkRegion: function(_xy) {
            var oxy = _xy,
                r = this.getRegion(),
                oh = this.get(DRAG_NODE).get(OFFSET_HEIGHT),
                ow = this.get(DRAG_NODE).get(OFFSET_WIDTH);

                if (oxy[1] > (r.bottom - oh)) {
                    _xy[1] = (r.bottom - oh);
                }
                if (r.top > oxy[1]) {
                    _xy[1] = r.top;

                }
                if (oxy[0] > (r.right - ow)) {
                    _xy[0] = (r.right - ow);
                }
                if (r.left > oxy[0]) {
                    _xy[0] = r.left;
                }

            return _xy;
        },
        /**
        * @method inRegion
        * @description Checks if the XY passed or the dragNode is inside the active region.
        * @param {Array} xy Optional XY to check, if not supplied this.get('dragNode').getXY() is used.
        * @return {Boolean} True if the XY is inside the region, false otherwise.
        */
        inRegion: function(xy) {
            xy = xy || this.get(DRAG_NODE).getXY();

            var _xy = this._checkRegion([xy[0], xy[1]]),
                inside = false;
                if ((xy[0] === _xy[0]) && (xy[1] === _xy[1])) {
                    inside = true;
                }
            return inside;
        },
        /**
        * @private
        * @method _align
        * @description Override of Drag _align to account for region checking and tick checking
        * @param {Array} xy The XY to check for ticks and region
        * @return {Array} The modified XY coords.
        */
        _align: function(xy) {
            var _xy = C.superclass._align.apply(this, arguments),
                r = this.getRegion(true);

            if (this.get('stickX')) {
                _xy[1] = (this.startXY[1] - this.deltaXY[1]);
            }
            if (this.get('stickY')) {
                _xy[0] = (this.startXY[0] - this.deltaXY[0]);
            }


            if (r) {
                _xy = this._checkRegion(_xy);
            }

            _xy = this._checkTicks(_xy, r);
            return _xy;
        },
        /**
        * @private
        * @method _calcTicks
        * @description Helper method to calculate the tick offsets for a given position
        * @param {Number} pos The current X or Y position
        * @param {Number} start The start X or Y position
        * @param {Number} tick The X or Y tick increment
        * @param {Number} off1 The min offset that we can't pass (region)
        * @param {Number} off2 The max offset that we can't pass (region)
        * @return {Number} The new position based on the tick calculation
        */
        _calcTicks: function(pos, start, tick, off1, off2) {
            var ix = ((pos - start) / tick),
                min = Math.floor(ix),
                max = Math.ceil(ix);
                if ((min !== 0) || (max !== 0)) {
                    if ((ix >= min) && (ix <= max)) {
                        pos = (start + (tick * min));
                        if (off1 && off2) {
                            if (pos < off1) {
                                pos = (start + (tick * (min + 1)));
                            }
                            if (pos > off2) {
                                pos = (start + (tick * (min - 1)));
                            }
                        }
                    }
                }
                return pos;
        },
        /**
        * @private
        * @method _calcTickArray
        * @description This method is used with the tickXArray and tickYArray config options
        * @param {Number} pos The current X or Y position
        * @param {Number} ticks The array containing our custom tick positions.
        * @param {Number} off1 The min offset that we can't pass (region)
        * @param {Number} off2 The max offset that we can't pass (region)
        * @return The tick position
        */
        _calcTickArray: function(pos, ticks, off1, off2) {
            var i = 0, len = ticks.length, next = 0;

            if (!ticks || (ticks.length === 0)) {
                return pos;
            } else if (ticks[0] >= pos) {
                return ticks[0];
            } else {
                for (i = 0; i < len; i++) {
                    next = (i + 1);
                    if (ticks[next] && ticks[next] >= pos) {
                        var diff1 = pos - ticks[i],
                            diff2 = ticks[next] - pos;
                        var ret = (diff2 > diff1) ? ticks[i] : ticks[next];
                        if (off1 && off2) {
                            if (ret > off2) {
                                if (ticks[i]) {
                                    ret = ticks[i];
                                } else {
                                    ret = ticks[len - 1];
                                }
                            }
                        }
                        return ret;
                    }

                }
                return ticks[ticks.length - 1];
            }
        },
        /**
        * @private
        * @method _checkTicks
        * @description This method delegates the proper helper method for tick calculations
        * @param {Array} xy The XY coords for the Drag
        * @param {Object} r The optional region that we are bound to.
        * @return {Array} The calced XY coords
        */
        _checkTicks: function(xy, r) {
            var lx = (this.startXY[0] - this.deltaXY[0]),
                ly = (this.startXY[1] - this.deltaXY[1]),
                xt = this.get('tickX'),
                yt = this.get('tickY');
                if (xt && !this.get('tickXArray')) {
                    xy[0] = this._calcTicks(xy[0], lx, xt, r.left, r.right);
                }
                if (yt && !this.get('tickYArray')) {
                    xy[1] = this._calcTicks(xy[1], ly, yt, r.top, r.bottom);
                }
                if (this.get('tickXArray')) {
                    xy[0] = this._calcTickArray(xy[0], this.get('tickXArray'), r.left, r.right);
                }
                if (this.get('tickYArray')) {
                    xy[1] = this._calcTickArray(xy[1], this.get('tickYArray'), r.top, r.bottom);
                }

            return xy;
        }
    };
    //Extend DD.Drag
    Y.extend(C, Y.DD.Drag, proto);
    //Set this to DD.Drag for other extensions
    Y.DD.Drag = C;