dd-drag.js revision bef5bd55cae040389070d8db272d07e4d896997c
363N/AYUI.add('dd-drag', function(Y) {
363N/A
363N/A
363N/A /**
363N/A * 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.
363N/A * @module dd
363N/A * @submodule dd-drag
363N/A */
363N/A /**
363N/A * This class provides the ability to drag a Node.
363N/A * @class Drag
363N/A * @extends Base
363N/A * @constructor
363N/A */
363N/A
363N/A var DDM = Y.DD.DDM,
363N/A NODE = 'node',
363N/A DRAG_NODE = 'dragNode',
363N/A OFFSET_HEIGHT = 'offsetHeight',
363N/A OFFSET_WIDTH = 'offsetWidth',
363N/A MOUSE_UP = 'mouseup',
363N/A MOUSE_DOWN = 'mousedown',
6017N/A DRAG_START = 'dragstart',
363N/A /**
363N/A * @event drag:mouseDown
363N/A * @description Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
363N/A * @preventable _handleMouseDown
363N/A * @param {Event} ev The mousedown event.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_MOUSE_DOWN = 'drag:mouseDown',
363N/A /**
363N/A * @event drag:afterMouseDown
363N/A * @description Fires after the mousedown event has been cleared.
363N/A * @param {Event} ev The mousedown event.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_AFTER_MOUSE_DOWN = 'drag:afterMouseDown',
363N/A /**
363N/A * @event drag:removeHandle
363N/A * @description Fires after a handle is removed.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_REMOVE_HANDLE = 'drag:removeHandle',
363N/A /**
6714N/A * @event drag:addHandle
6714N/A * @description Fires after a handle is added.
6714N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_ADD_HANDLE = 'drag:addHandle',
363N/A /**
363N/A * @event drag:removeInvalid
363N/A * @description Fires after an invalid selector is removed.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_REMOVE_INVALID = 'drag:removeInvalid',
363N/A /**
363N/A * @event drag:addInvalid
363N/A * @description Fires after an invalid selector is added.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_ADD_INVALID = 'drag:addInvalid',
363N/A /**
363N/A * @event drag:start
363N/A * @description Fires at the start of a drag operation.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_START = 'drag:start',
363N/A /**
363N/A * @event drag:end
363N/A * @description Fires at the end of a drag operation.
363N/A * @bubbles DDM
363N/A * @type Event.Custom
363N/A */
363N/A EV_END = 'drag:end',
363N/A /**
363N/A * @event drag:drag
363N/A * @description Fires every mousemove during a drag operation.
* @bubbles DDM
* @type Event.Custom
*/
EV_DRAG = 'drag:drag';
/**
* @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
*/
var Drag = function() {
Drag.superclass.constructor.apply(this, arguments);
DDM._regDrag(this);
};
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.fail('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.fail('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) {
Y.later(0, this, function(config) {
this._handleTarget(config);
}, 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 = this.get('bubbles');
config.node = this.get(NODE);
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._handleMouseDown,
queuable: false,
emitFacade: true,
bubbles: true
});
var ev = [
EV_AFTER_MOUSE_DOWN,
EV_REMOVE_HANDLE,
EV_ADD_HANDLE,
EV_REMOVE_INVALID,
EV_ADD_INVALID,
EV_START,
EV_END,
EV_DRAG,
'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
});
}, 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}
*/
_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}
* @type {Object}
*/
_invalidsDefault: {'textarea': true, 'input': true, 'a': true, 'button': 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,
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}
*/
_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}
*/
_handleMouseDownEvent: function(ev) {
this.fire(EV_MOUSE_DOWN, { ev: ev });
},
/**
* @private
* @method _handleMouseDown
* @description Handler for the mousedown DOM event
* @param {Event}
*/
_handleMouseDown: 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;
var self = this;
this._clickTimeout = setTimeout(function() {
self._timeoutCheck.call(self);
}, this.get('clickTimeThresh'));
}
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}
* @return {Boolean}
*/
validClick: function(ev) {
var r = false,
tar = ev.target,
hTest = null;
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 {
if (this.get(NODE).contains(tar) || this.get(NODE).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) {
var 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.get(NODE).getXY();
this.lastXY = this.nodeXY;
this.realXY = this.nodeXY;
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._fromTimeout = true;
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._invalids = Y.clone(this._invalidsDefault, true);
//this._createEvents();
Y.later(100, this, this._createEvents);
if (!this.get(DRAG_NODE)) {
this.set(DRAG_NODE, this.get(NODE));
}
this._prep();
this._dragThreshMet = false;
},
/**
* @private
* @method _prep
* @description Attach event listners and add classname
*/
_prep: function() {
var node = this.get(NODE);
node.addClass(DDM.CSS_PREFIX + '-draggable');
node.on(MOUSE_DOWN, this._handleMouseDownEvent, this, true);
node.on(MOUSE_UP, this._handleMouseUp, this, true);
node.on(DRAG_START, this._fixDragStart, this, true);
},
/**
* @private
* @method _unprep
* @description Detach event listners and remove classname
*/
_unprep: function() {
var node = this.get(NODE);
node.removeClass(DDM.CSS_PREFIX + '-draggable');
node.detach(MOUSE_DOWN, this._handleMouseDownEvent, this, true);
node.detach(MOUSE_UP, this._handleMouseUp, this, true);
node.detach(DRAG_START, this._fixDragStart, this, true);
},
/**
* @method start
* @description Starts the drag operation
* @return {Self}
* @chainable
*/
start: function() {
if (!this.get('lock') && !this.get('dragging')) {
DDM._start(this.deltaXY, [this.get(NODE).get(OFFSET_HEIGHT), this.get(NODE).get(OFFSET_WIDTH)]);
this.get(NODE).addClass(DDM.CSS_PREFIX + '-dragging');
this.fire(EV_START, { pageX: this.nodeXY[0], pageY: this.nodeXY[1] });
this.get(DRAG_NODE).on(MOUSE_UP, this._handleMouseUp, this, true);
var xy = this.nodeXY;
this._startTime = (new Date()).getTime();
this.region = {
'0': xy[0],
'1': xy[1],
area: 0,
top: xy[1],
right: xy[0] + this.get(NODE).get(OFFSET_WIDTH),
bottom: xy[1] + this.get(NODE).get(OFFSET_HEIGHT),
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();
clearTimeout(this._clickTimeout);
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] });
}
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-dragging');
this.set('dragging', false);
this.deltaXY = [0, 0];
this.get(DRAG_NODE).detach(MOUSE_UP, this._handleMouseUp, this, true);
return this;
},
/**
* @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.
* @return Array
* @type {Array}
*/
_align: function(xy) {
return [xy[0] - this.deltaXY[0], xy[1] - 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.
* @param {Boolean} noFire If true, the drag:drag event will not fire.
*/
_alignNode: function(eXY, noFire) {
var xy = this._align(eXY), diffXY = [], diffXY2 = [];
this._moveNode(xy, noFire);
},
/**
* @private
* @method _moveNode
* @description This method performs the actual element move.
* @param {Array} eXY The XY to move the element to, usually comes from the _alignNode method.
* @param {Boolean} noFire If true, the drag:drag event will not fire.
*/
_moveNode: function(xy, noFire) {
if (!this.get('dragging')) {
noFire = true;
}
var diffXY = [], diffXY2 = [];
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]);
if (this.get('move')) {
if (Y.UA.opera) {
this.get(DRAG_NODE).setXY(xy);
} else {
DDM.setXY(this.get(DRAG_NODE), diffXY);
//this.get(DRAG_NODE).setXY(xy);
}
this.realXY = xy;
}
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]
};
var startXY = this.nodeXY;
if (!noFire) {
this.fire(EV_DRAG, {
pageX: xy[0],
pageY: xy[1],
info: {
start: startXY,
xy: xy,
delta: diffXY,
offset: diffXY2
}
});
}
this.lastXY = xy;
},
/**
* @private
* @method _move
* @description Fired from DragDropMgr (DDM) on mousemove.
* @param {Event} 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);
var 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 {
clearTimeout(this._clickTimeout);
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() {
DDM._unregDrag(this);
this._unprep();
if (this.target) {
this.target.destroy();
}
}
});
Y.namespace('DD');
Y.DD.Drag = Drag;
}, '@VERSION@' ,{requires:['dd-ddm-base'], skinnable:false});