/**
+ * 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.
+ * @module dd
+ * @submodule dd-drag
+ */
+ /**
+ * This class provides the ability to drag a Node.
+ * @class Drag
+ * @extends Base
+ * @constructor
+ * @namespace DD
+ */
+
+ var DDM = Y.DD.DDM,
+ NODE = 'node',
+ DRAGGING = 'dragging',
+ DRAG_NODE = 'dragNode',
+ OFFSET_HEIGHT = 'offsetHeight',
+ OFFSET_WIDTH = 'offsetWidth',
+ MOUSE_UP = 'mouseup',
+ MOUSE_DOWN = 'mousedown',
+ DRAG_START = 'dragstart',
+ /**
+ * @event drag:mouseDown
+ * @description Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
+ * @preventable _defMouseDownFn
+ * @param {Event.Facade} ev The mousedown event.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_MOUSE_DOWN = 'drag:mouseDown',
+ /**
+ * @event drag:afterMouseDown
+ * @description Fires after the mousedown event has been cleared.
+ * @param {Event.Facade} ev The mousedown event.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_AFTER_MOUSE_DOWN = 'drag:afterMouseDown',
+ /**
+ * @event drag:removeHandle
+ * @description Fires after a handle is removed.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_REMOVE_HANDLE = 'drag:removeHandle',
+ /**
+ * @event drag:addHandle
+ * @description Fires after a handle is added.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_ADD_HANDLE = 'drag:addHandle',
+ /**
+ * @event drag:removeInvalid
+ * @description Fires after an invalid selector is removed.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_REMOVE_INVALID = 'drag:removeInvalid',
+ /**
+ * @event drag:addInvalid
+ * @description Fires after an invalid selector is added.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_ADD_INVALID = 'drag:addInvalid',
+ /**
+ * @event drag:start
+ * @description Fires at the start of a drag operation.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_START = 'drag:start',
+ /**
+ * @event drag:end
+ * @description Fires at the end of a drag operation.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_END = 'drag:end',
+ /**
+ * @event drag:drag
+ * @description Fires every mousemove during a drag operation.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_DRAG = 'drag:drag',
+ /**
+ * @event drag:align
+ * @preventable _defAlignFn
+ * @description Fires when this node is aligned.
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ EV_ALIGN = 'drag:align',
+ /**
+ * @event drag:over
+ * @description Fires when this node is over a Drop Target. (Fired from dd-drop)
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ /**
+ * @event drag:enter
+ * @description Fires when this node enters a Drop Target. (Fired from dd-drop)
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ /**
+ * @event drag:exit
+ * @description Fires when this node exits a Drop Target. (Fired from dd-drop)
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ /**
+ * @event drag:drophit
+ * @description Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+ /**
+ * @event drag:dropmiss
+ * @description Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)
+ * @bubbles DDM
+ * @type {Event.Custom}
+ */
+
+ Drag = function(o) {
+ this._lazyAddAttrs = false;
+ Drag.superclass.constructor.apply(this, arguments);
+
+ var valid = DDM._regDrag(this);
+ if (!valid) {
+ Y.error('Failed to register node, already in use: ' + o.node);
+ }
+ };
+
+ Drag.NAME = 'drag';
+
+ Drag.ATTRS = {
+ /**
+ * @attribute node
+ * @description Y.Node instanace to use as the element to initiate a drag operation
+ * @type Node
+ */
+ node: {
+ setter: function(node) {
+ var n = Y.get(node);
+ if (!n) {
+ Y.error('DD.Drag: Invalid Node Given: ' + node);
+ } else {
+ n = n.item(0);
+ }
+ return n;
+ }
+ },
+ /**
+ * @attribute dragNode
+ * @description Y.Node instanace to use as the draggable element, defaults to node
+ * @type Node
+ */
+ dragNode: {
+ setter: function(node) {
+ var n = Y.Node.get(node);
+ if (!n) {
+ Y.error('DD.Drag: Invalid dragNode Given: ' + node);
+ }
+ return n;
+ }
+ },
+ /**
+ * @attribute offsetNode
+ * @description Offset the drag element by the difference in cursor position: default true
+ * @type Boolean
+ */
+ offsetNode: {
+ value: true
+ },
+ /**
+ * @attribute clickPixelThresh
+ * @description The number of pixels to move to start a drag operation, default is 3.
+ * @type Number
+ */
+ clickPixelThresh: {
+ value: DDM.get('clickPixelThresh')
+ },
+ /**
+ * @attribute clickTimeThresh
+ * @description The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
+ * @type Number
+ */
+ clickTimeThresh: {
+ value: DDM.get('clickTimeThresh')
+ },
+ /**
+ * @attribute lock
+ * @description Set to lock this drag element so that it can't be dragged: default false.
+ * @type Boolean
+ */
+ lock: {
+ value: false,
+ setter: function(lock) {
+ if (lock) {
+ this.get(NODE).addClass(DDM.CSS_PREFIX + '-locked');
+ } else {
+ this.get(NODE).removeClass(DDM.CSS_PREFIX + '-locked');
+ }
+ return lock;
+ }
+ },
+ /**
+ * @attribute data
+ * @description A payload holder to store arbitrary data about this drag object, can be used to store any value.
+ * @type Mixed
+ */
+ data: {
+ value: false
+ },
+ /**
+ * @attribute move
+ * @description If this is false, the drag element will not move with the cursor: default true. Can be used to "resize" the element.
+ * @type Boolean
+ */
+ move: {
+ value: true
+ },
+ /**
+ * @attribute useShim
+ * @description Use the protective shim on all drag operations: default true. Only works with dd-ddm, not dd-ddm-base.
+ * @type Boolean
+ */
+ useShim: {
+ value: true
+ },
+ /**
+ * @attribute activeHandle
+ * @description 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.
+ * @type Node
+ */
+ activeHandle: {
+ value: false
+ },
+ /**
+ * @attribute primaryButtonOnly
+ * @description 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.
+ * @type Boolean
+ */
+ primaryButtonOnly: {
+ value: true
+ },
+ /**
+ * @attribute dragging
+ * @description 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.
+ * @type Boolean
+ */
+ dragging: {
+ value: false
+ },
+ parent: {
+ value: false
+ },
+ /**
+ * @attribute target
+ * @description This attribute only works if the dd-drop module has been loaded. It will make this node a drop target as well as draggable.
+ * @type Boolean
+ */
+ target: {
+ value: false,
+ setter: function(config) {
+ this._handleTarget(config);
+ return config;
+ }
+ },
+ /**
+ * @attribute dragMode
+ * @description This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of this Drag instance.
+ * @type String
+ */
+ dragMode: {
+ value: null,
+ setter: function(mode) {
+ return DDM._setDragMode(mode);
+ }
+ },
+ /**
+ * @attribute groups
+ * @description Array of groups to add this drag into.
+ * @type Array
+ */
+ groups: {
+ value: ['default'],
+ getter: function() {
+ if (!this._groups) {
+ this._groups = {};
+ }
+ var ret = [];
+ Y.each(this._groups, function(v, k) {
+ ret[ret.length] = k;
+ });
+ return ret;
+ },
+ setter: function(g) {
+ this._groups = {};
+ Y.each(g, function(v, k) {
+ this._groups[v] = true;
+ }, this);
+ return g;
+ }
+ },
+ /**
+ * @attribute handles
+ * @description Array of valid handles to add. Adding something here will set all handles, even if previously added with addHandle
+ * @type Array
+ */
+ handles: {
+ value: null,
+ setter: function(g) {
+ if (g) {
+ this._handles = {};
+ Y.each(g, function(v, k) {
+ this._handles[v] = true;
+ }, this);
+ } else {
+ this._handles = null;
+ }
+ return g;
+ }
+ },
+ /**
+ * @attribute bubbles
+ * @description Controls the default bubble parent for this Drag instance. Default: Y.DD.DDM. Set to false to disable bubbling.
+ * @type Object
+ */
+ bubbles: {
+ writeOnce: true,
+ value: Y.DD.DDM
+ }
+ };
+
+ Y.extend(Drag, Y.Base, {
+ /**
+ * @method addToGroup
+ * @description Add this Drag instance to a group, this should be used for on-the-fly group additions.
+ * @param {String} g The group to add this Drag Instance to.
+ * @return {Self}
+ * @chainable
+ */
+ addToGroup: function(g) {
+ this._groups[g] = true;
+ DDM._activateTargets();
+ return this;
+ },
+ /**
+ * @method removeFromGroup
+ * @description Remove this Drag instance from a group, this should be used for on-the-fly group removals.
+ * @param {String} g The group to remove this Drag Instance from.
+ * @return {Self}
+ * @chainable
+ */
+ removeFromGroup: function(g) {
+ delete this._groups[g];
+ DDM._activateTargets();
+ return this;
+ },
+ /**
+ * @property target
+ * @description This will be a reference to the Drop instance associated with this drag if the target: true config attribute is set..
+ * @type {Object}
+ */
+ target: null,
+ /**
+ * @private
+ * @method _handleTarget
+ * @description Attribute handler for the target config attribute.
+ * @param {Boolean/Object}
+ * @return {Boolean/Object}
+ */
+ _handleTarget: function(config) {
+ if (Y.DD.Drop) {
+ if (config === false) {
+ if (this.target) {
+ DDM._unregTarget(this.target);
+ this.target = null;
+ }
+ return false;
+ } else {
+ if (!Y.Lang.isObject(config)) {
+ config = {};
+ }
+ config.bubbles = ('bubbles' in config) ? config.bubbles : this.get('bubbles');
+ config.node = this.get(NODE);
+ config.groups = config.groups || this.get('groups');
+ this.target = new Y.DD.Drop(config);
+ }
+ } else {
+ return false;
+ }
+ },
+ /**
+ * @private
+ * @property _groups
+ * @description Storage Array for the groups this drag belongs to.
+ * @type {Array}
+ */
+ _groups: null,
+ /**
+ * @private
+ * @method _createEvents
+ * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
+ */
+ _createEvents: function() {
+
+ this.publish(EV_MOUSE_DOWN, {
+ defaultFn: this._defMouseDownFn,
+ queuable: false,
+ emitFacade: true,
+ bubbles: true,
+ prefix: 'drag'
+ });
+
+ this.publish(EV_ALIGN, {
+ defaultFn: this._defAlignFn,
+ queuable: false,
+ emitFacade: true,
+ bubbles: true,
+ prefix: 'drag'
+ });
+
+ this.publish(EV_DRAG, {
+ defaultFn: this._defDragFn,
+ queuable: false,
+ emitFacade: true,
+ bubbles: true,
+ prefix: 'drag'
+ });
+
+ this.publish(EV_END, {
+ preventedFn: this._prevEndFn,
+ queuable: false,
+ emitFacade: true,
+ bubbles: true,
+ prefix: 'drag'
+ });
+
+ var ev = [
+ EV_AFTER_MOUSE_DOWN,
+ EV_REMOVE_HANDLE,
+ EV_ADD_HANDLE,
+ EV_REMOVE_INVALID,
+ EV_ADD_INVALID,
+ EV_START,
+ 'drag:drophit',
+ 'drag:dropmiss',
+ 'drag:over',
+ 'drag:enter',
+ 'drag:exit'
+ ];
+
+ Y.each(ev, function(v, k) {
+ this.publish(v, {
+ type: v,
+ emitFacade: true,
+ bubbles: true,
+ preventable: false,
+ queuable: false,
+ prefix: 'drag'
+ });
+ }, this);
+
+ if (this.get('bubbles')) {
+ this.addTarget(this.get('bubbles'));
+ }
+
+
+ },
+ /**
+ * @private
+ * @property _ev_md
+ * @description A private reference to the mousedown DOM event
+ * @type {Event.Facade}
+ */
+ _ev_md: null,
+ /**
+ * @private
+ * @property _startTime
+ * @description The getTime of the mousedown event. Not used, just here in case someone wants/needs to use it.
+ * @type Date
+ */
+ _startTime: null,
+ /**
+ * @private
+ * @property _endTime
+ * @description The getTime of the mouseup event. Not used, just here in case someone wants/needs to use it.
+ * @type Date
+ */
+ _endTime: null,
+ /**
+ * @private
+ * @property _handles
+ * @description A private hash of the valid drag handles
+ * @type {Object}
+ */
+ _handles: null,
+ /**
+ * @private
+ * @property _invalids
+ * @description A private hash of the invalid selector strings
+ * @type {Object}
+ */
+ _invalids: null,
+ /**
+ * @private
+ * @property _invalidsDefault
+ * @description A private hash of the default invalid selector strings: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true}
+ * @type {Object}
+ */
+ _invalidsDefault: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true },
+ /**
+ * @private
+ * @property _dragThreshMet
+ * @description Private flag to see if the drag threshhold was met
+ * @type {Boolean}
+ */
+ _dragThreshMet: null,
+ /**
+ * @private
+ * @property _fromTimeout
+ * @description Flag to determine if the drag operation came from a timeout
+ * @type {Boolean}
+ */
+ _fromTimeout: null,
+ /**
+ * @private
+ * @property _clickTimeout
+ * @description Holder for the setTimeout call
+ * @type {Boolean}
+ */
+ _clickTimeout: null,
+ /**
+ * @property deltaXY
+ * @description The offset of the mouse position to the element's position
+ * @type {Array}
+ */
+ deltaXY: null,
+ /**
+ * @property startXY
+ * @description The initial mouse position
+ * @type {Array}
+ */
+ startXY: null,
+ /**
+ * @property nodeXY
+ * @description The initial element position
+ * @type {Array}
+ */
+ nodeXY: null,
+ /**
+ * @property lastXY
+ * @description The position of the element as it's moving (for offset calculations)
+ * @type {Array}
+ */
+ lastXY: null,
+ /**
+ * @property actXY
+ * @description The xy that the node will be set to. Changing this will alter the position as it's dragged.
+ * @type {Array}
+ */
+ actXY: null,
+ /**
+ * @property realXY
+ * @description The real xy position of the node.
+ * @type {Array}
+ */
+ realXY: null,
+ /**
+ * @property mouseXY
+ * @description The XY coords of the mousemove
+ * @type {Array}
+ */
+ mouseXY: null,
+ /**
+ * @property region
+ * @description A region object associated with this drag, used for checking regions while dragging.
+ * @type Object
+ */
+ region: null,
+ /**
+ * @private
+ * @method _handleMouseUp
+ * @description Handler for the mouseup DOM event
+ * @param {Event.Facade}
+ */
+ _handleMouseUp: function(ev) {
+ this._fixIEMouseUp();
+ if (DDM.activeDrag) {
+ DDM._end();
+ }
+ },
+ /**
+ * @private
+ * @method _fixDragStart
+ * @description 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.
+ */
+ _fixDragStart: function(e) {
+ e.preventDefault();
+ },
+ /**
+ * @private
+ * @method _ieSelectFix
+ * @description The function we use as the onselectstart handler when we start a drag in Internet Explorer
+ */
+ _ieSelectFix: function() {
+ return false;
+ },
+ /**
+ * @private
+ * @property _ieSelectBack
+ * @description We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
+ */
+ _ieSelectBack: null,
+ /**
+ * @private
+ * @method _fixIEMouseDown
+ * @description This method copies the onselectstart listner on the document to the _ieSelectFix property
+ */
+ _fixIEMouseDown: function() {
+ if (Y.UA.ie) {
+ this._ieSelectBack = Y.config.doc.body.onselectstart;
+ Y.config.doc.body.onselectstart = this._ieSelectFix;
+ }
+ },
+ /**
+ * @private
+ * @method _fixIEMouseUp
+ * @description This method copies the _ieSelectFix property back to the onselectstart listner on the document.
+ */
+ _fixIEMouseUp: function() {
+ if (Y.UA.ie) {
+ Y.config.doc.body.onselectstart = this._ieSelectBack;
+ }
+ },
+ /**
+ * @private
+ * @method _handleMouseDownEvent
+ * @description Handler for the mousedown DOM event
+ * @param {Event.Facade}
+ */
+ _handleMouseDownEvent: function(ev) {
+ this.fire(EV_MOUSE_DOWN, { ev: ev });
+ },
+ /**
+ * @private
+ * @method _defMouseDownFn
+ * @description Handler for the mousedown DOM event
+ * @param {Event.Facade}
+ */
+ _defMouseDownFn: function(e) {
+ var ev = e.ev;
+ this._dragThreshMet = false;
+ this._ev_md = ev;
+
+ if (this.get('primaryButtonOnly') && ev.button > 1) {
+ return false;
+ }
+ if (this.validClick(ev)) {
+ this._fixIEMouseDown();
+ ev.halt();
+ this._setStartPosition([ev.pageX, ev.pageY]);
+
+ DDM.activeDrag = this;
+
+ this._clickTimeout = Y.later(this.get('clickTimeThresh'), this, this._timeoutCheck);
+ }
+ this.fire(EV_AFTER_MOUSE_DOWN, { ev: ev });
+ },
+ /**
+ * @method validClick
+ * @description 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.
+ * @param {Event.Facade}
+ * @return {Boolean}
+ */
+ validClick: function(ev) {
+ var r = false, n = false,
+ tar = ev.target,
+ hTest = null,
+ els = null,
+ set = false;
+ if (this._handles) {
+ Y.each(this._handles, function(i, n) {
+ if (Y.Lang.isString(n)) {
+ //Am I this or am I inside this
+ if (tar.test(n + ', ' + n + ' *') && !hTest) {
+ hTest = n;
+ r = true;
+ }
+ }
+ });
+ } else {
+ n = this.get(NODE)
+ if (n.contains(tar) || n.compareTo(tar)) {
+ r = true;
+ }
+ }
+ if (r) {
+ if (this._invalids) {
+ Y.each(this._invalids, function(i, n) {
+ if (Y.Lang.isString(n)) {
+ //Am I this or am I inside this
+ if (tar.test(n + ', ' + n + ' *')) {
+ r = false;
+ }
+ }
+ });
+ }
+ }
+ if (r) {
+ if (hTest) {
+ els = ev.currentTarget.queryAll(hTest);
+ set = false;
+ els.each(function(n, i) {
+ if ((n.contains(tar) || n.compareTo(tar)) && !set) {
+ set = true;
+ this.set('activeHandle', n);
+ }
+ }, this);
+ } else {
+ this.set('activeHandle', this.get(NODE));
+ }
+ }
+ return r;
+ },
+ /**
+ * @private
+ * @method _setStartPosition
+ * @description Sets the current position of the Element and calculates the offset
+ * @param {Array} xy The XY coords to set the position to.
+ */
+ _setStartPosition: function(xy) {
+ this.startXY = xy;
+
+ this.nodeXY = this.lastXY = this.realXY = this.get(NODE).getXY();
+
+ if (this.get('offsetNode')) {
+ this.deltaXY = [(this.startXY[0] - this.nodeXY[0]), (this.startXY[1] - this.nodeXY[1])];
+ } else {
+ this.deltaXY = [0, 0];
+ }
+ },
+ /**
+ * @private
+ * @method _timeoutCheck
+ * @description The method passed to setTimeout to determine if the clickTimeThreshold was met.
+ */
+ _timeoutCheck: function() {
+ if (!this.get('lock') && !this._dragThreshMet) {
+ this._fromTimeout = this._dragThreshMet = true;
+ this.start();
+ this._alignNode([this._ev_md.pageX, this._ev_md.pageY], true);
+ }
+ },
+ /**
+ * @method removeHandle
+ * @description Remove a Selector added by addHandle
+ * @param {String} str The selector for the handle to be removed.
+ * @return {Self}
+ * @chainable
+ */
+ removeHandle: function(str) {
+ if (this._handles[str]) {
+ delete this._handles[str];
+ this.fire(EV_REMOVE_HANDLE, { handle: str });
+ }
+ return this;
+ },
+ /**
+ * @method addHandle
+ * @description Add a handle to a drag element. Drag only initiates when a mousedown happens on this element.
+ * @param {String} str The selector to test for a valid handle. Must be a child of the element.
+ * @return {Self}
+ * @chainable
+ */
+ addHandle: function(str) {
+ if (!this._handles) {
+ this._handles = {};
+ }
+ if (Y.Lang.isString(str)) {
+ this._handles[str] = true;
+ this.fire(EV_ADD_HANDLE, { handle: str });
+ }
+ return this;
+ },
+ /**
+ * @method removeInvalid
+ * @description Remove an invalid handle added by addInvalid
+ * @param {String} str The invalid handle to remove from the internal list.
+ * @return {Self}
+ * @chainable
+ */
+ removeInvalid: function(str) {
+ if (this._invalids[str]) {
+ this._invalids[str] = null;
+ delete this._invalids[str];
+ this.fire(EV_REMOVE_INVALID, { handle: str });
+ }
+ return this;
+ },
+ /**
+ * @method addInvalid
+ * @description Add a selector string to test the handle against. If the test passes the drag operation will not continue.
+ * @param {String} str The selector to test against to determine if this is an invalid drag handle.
+ * @return {Self}
+ * @chainable
+ */
+ addInvalid: function(str) {
+ if (Y.Lang.isString(str)) {
+ this._invalids[str] = true;
+ this.fire(EV_ADD_INVALID, { handle: str });
+ }
+ return this;
+ },
+ /**
+ * @private
+ * @method initializer
+ * @description Internal init handler
+ */
+ initializer: function() {
+ this.get(NODE).dd = this;
+
+ if (!this.get(NODE).get('id')) {
+ var id = Y.stamp(this.get(NODE));
+ this.get(NODE).set('id', id);
+ }
+
+ this.actXY = [];
+
+ this._invalids = Y.clone(this._invalidsDefault, true);
+
+ this._createEvents();
+
+ if (!this.get(DRAG_NODE)) {
+ this.set(DRAG_NODE, this.get(NODE));
+ }
+
+ //Fix for #2528096
+ //Don't prep the DD instance until all plugins are loaded.
+ this.on('initializedChange', Y.bind(this._prep, this));
+
+ //Shouldn't have to do this..
+ this.set('groups', this.get('groups'));
+ },
+ /**
+ * @private
+ * @method _prep
+ * @description Attach event listners and add classname
+ */
+ _prep: function() {
+ this._dragThreshMet = false;
+ var node = this.get(NODE);
+ node.addClass(DDM.CSS_PREFIX + '-draggable');
+ node.on(MOUSE_DOWN, Y.bind(this._handleMouseDownEvent, this));
+ node.on(MOUSE_UP, Y.bind(this._handleMouseUp, this));
+ node.on(DRAG_START, Y.bind(this._fixDragStart, this));
+ },
+ /**
+ * @private
+ * @method _unprep
+ * @description Detach event listeners and remove classname
+ */
+ _unprep: function() {
+ var node = this.get(NODE);
+ node.removeClass(DDM.CSS_PREFIX + '-draggable');
+ node.detachAll();
+ },
+ /**
+ * @method start
+ * @description Starts the drag operation
+ * @return {Self}
+ * @chainable
+ */
+ start: function() {
+ if (!this.get('lock') && !this.get(DRAGGING)) {
+ var node = this.get(NODE), ow = node.get(OFFSET_WIDTH), oh = node.get(OFFSET_HEIGHT);
+ this._startTime = (new Date()).getTime();
+
+ DDM._start();
+ node.addClass(DDM.CSS_PREFIX + '-dragging');
+ this.fire(EV_START, {
+ pageX: this.nodeXY[0],
+ pageY: this.nodeXY[1],
+ startTime: this._startTime
+ });
+ var xy = this.nodeXY;
+
+
+ this.region = {
+ '0': xy[0],
+ '1': xy[1],
+ area: 0,
+ top: xy[1],
+ right: xy[0] + ow,
+ bottom: xy[1] + oh,
+ left: xy[0]
+ };
+ this.set(DRAGGING, true);
+ }
+ return this;
+ },
+ /**
+ * @method end
+ * @description Ends the drag operation
+ * @return {Self}
+ * @chainable
+ */
+ end: function() {
+ this._endTime = (new Date()).getTime();
+ if (this._clickTimeout) {
+ this._clickTimeout.cancel();
+ }
+ this._dragThreshMet = false;
+ this._fromTimeout = false;
+ if (!this.get('lock') && this.get(DRAGGING)) {
+ this.fire(EV_END, {
+ pageX: this.lastXY[0],
+ pageY: this.lastXY[1],
+ startTime: this._startTime,
+ endTime: this._endTime
+ });
+ }
+ this.get(NODE).removeClass(DDM.CSS_PREFIX + '-dragging');
+ this.set(DRAGGING, false);
+ this.deltaXY = [0, 0];
+
+ return this;
+ },
+ /**
+ * @private
+ * @method _prevEndFn
+ * @description Handler for preventing the drag:end event. It will reset the node back to it's start position
+ */
+ _prevEndFn: function(e) {
+ //Bug #1852577
+ this.get(DRAG_NODE).setXY(this.nodeXY);
+ },
+ /**
+ * @private
+ * @method _align
+ * @description Calculates the offsets and set's the XY that the element will move to.
+ * @param {Array} xy The xy coords to align with.
+ */
+ _align: function(xy) {
+ this.fire(EV_ALIGN, {pageX: xy[0], pageY: xy[1] });
+ },
+ /**
+ * @private
+ * @method _defAlignFn
+ * @description Calculates the offsets and set's the XY that the element will move to.
+ * @param {Event.Facade} e The drag:align event.
+ */
+ _defAlignFn: function(e) {
+ this.actXY = [e.pageX - this.deltaXY[0], e.pageY - this.deltaXY[1]];
+ },
+ /**
+ * @private
+ * @method _alignNode
+ * @description This method performs the alignment before the element move.
+ * @param {Array} eXY The XY to move the element to, usually comes from the mousemove DOM event.
+ */
+ _alignNode: function(eXY) {
+ this._align(eXY);
+ this._moveNode();
+ },
+ /**
+ * @private
+ * @method _moveNode
+ * @description This method performs the actual element move.
+ */
+ _moveNode: function(scroll) {
+ //if (!this.get(DRAGGING)) {
+ // return;
+ //}
+ var diffXY = [], diffXY2 = [], startXY = this.nodeXY, xy = this.actXY;
+
+ diffXY[0] = (xy[0] - this.lastXY[0]);
+ diffXY[1] = (xy[1] - this.lastXY[1]);
+
+ diffXY2[0] = (xy[0] - this.nodeXY[0]);
+ diffXY2[1] = (xy[1] - this.nodeXY[1]);
+
+
+ this.region = {
+ '0': xy[0],
+ '1': xy[1],
+ area: 0,
+ top: xy[1],
+ right: xy[0] + this.get(DRAG_NODE).get(OFFSET_WIDTH),
+ bottom: xy[1] + this.get(DRAG_NODE).get(OFFSET_HEIGHT),
+ left: xy[0]
+ };
+
+ this.fire(EV_DRAG, {
+ pageX: xy[0],
+ pageY: xy[1],
+ scroll: scroll,
+ info: {
+ start: startXY,
+ xy: xy,
+ delta: diffXY,
+ offset: diffXY2
+ }
+ });
+
+ this.lastXY = xy;
+ },
+ /**
+ * @private
+ * @method _defDragFn
+ * @description Default function for drag:drag. Fired from _moveNode.
+ * @param {Event.Facade} ev The drag:drag event
+ */
+ _defDragFn: function(e) {
+ if (this.get('move')) {
+ if (e.scroll) {
+ e.scroll.node.set('scrollTop', e.scroll.top);
+ e.scroll.node.set('scrollLeft', e.scroll.left);
+ }
+ this.get(DRAG_NODE).setXY([e.pageX, e.pageY]);
+ this.realXY = [e.pageX, e.pageY];
+ }
+ },
+ /**
+ * @private
+ * @method _move
+ * @description Fired from DragDropMgr (DDM) on mousemove.
+ * @param {Event.Facade} ev The mousemove DOM event
+ */
+ _move: function(ev) {
+ if (this.get('lock')) {
+ return false;
+ } else {
+ this.mouseXY = [ev.pageX, ev.pageY];
+ if (!this._dragThreshMet) {
+ var diffX = Math.abs(this.startXY[0] - ev.pageX),
+ diffY = Math.abs(this.startXY[1] - ev.pageY);
+ if (diffX > this.get('clickPixelThresh') || diffY > this.get('clickPixelThresh')) {
+ this._dragThreshMet = true;
+ this.start();
+ this._alignNode([ev.pageX, ev.pageY]);
+ }
+ } else {
+ if (this._clickTimeout) {
+ this._clickTimeout.cancel();
+ }
+ this._alignNode([ev.pageX, ev.pageY]);
+ }
+ }
+ },
+ /**
+ * @method stopDrag
+ * @description Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
+ * @return {Self}
+ * @chainable
+ */
+ stopDrag: function() {
+ if (this.get(DRAGGING)) {
+ DDM._end();
+ }
+ return this;
+ },
+ /**
+ * @private
+ * @method destructor
+ * @description Lifecycle destructor, unreg the drag from the DDM and remove listeners
+ */
+ destructor: function() {
+ this._unprep();
+ this.detachAll();
+ if (this.target) {
+ this.target.destroy();
+ }
+ DDM._unregDrag(this);
+ }
+ });
+ Y.namespace('DD');
+ Y.DD.Drag = Drag;
+