Skip to content

Instantly share code, notes, and snippets.

@tilomitra
Created May 20, 2011 21:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tilomitra/983826 to your computer and use it in GitHub Desktop.
Save tilomitra/983826 to your computer and use it in GitHub Desktop.
YUI Drag Plugin for Y.Node and Y.Widget
/**
* Simple Drag plugin that can be attached to a Node or Widget via the plug method.
* @module dd
* @submodule dd-plugin
*/
/**
* Simple Drag plugin that can be attached to a Node or Widget via the plug method.
* @class Drag
* @extends DD.Drag
* @constructor
* @namespace Plugin
*/
var Drag = function(config) {
if (Y.Widget && config.host instanceof Y.Widget) {
config.node = config.host.get('boundingBox');
config.widget = config.host;
}
else {
config.node = config.host;
config.widget = false;
}
Drag.superclass.constructor.call(this, config);
},
EV_DRAG = 'drag:drag',
EV_DRAG_END = 'drag:end';
/**
* @property NAME
* @description dd-plugin
* @type {String}
*/
Drag.NAME = "dd-plugin";
/**
* @property NS
* @description The Drag instance will be placed on the Node instance under the dd namespace. It can be accessed via Node.dd;
* @type {String}
*/
Drag.NS = "dd";
Y.extend(Drag, Y.DD.Drag, {
//refers to a Y.Widget if its the host, otherwise = false.
_widget: undefined,
//refers to the [x,y] coordinate where the drag was stopped last
_stoppedPosition: undefined,
//boolean: true if widget uses widgetPosition, else False
_usesWidgetPosition: function(widget) {
var r = false;
if (widget) {
r = (widget.hasImpl && widget.hasImpl(Y.WidgetPosition)) ? true : false;
}
return r;
},
initializer: function(config) {
this._widget = config.widget;
//if this thing is a widget, and it uses widgetposition...
if (this._usesWidgetPosition(this._widget)) {
//set the x,y on the widget's ATTRS
this.on(EV_DRAG, this._setWidgetCoords);
//store the new position that the widget ends up on
this.on(EV_DRAG_END, this._updateStopPosition);
}
},
_setWidgetCoords: function(e) {
//get the last position where the widget was, or get the starting point
var nodeXY = this._stoppedPosition || e.target.nodeXY,
realXY = e.target.realXY,
//amount moved = [(x2 - x1) , (y2 - y1)]
movedXY = [realXY[0] - nodeXY[0], realXY[1] - nodeXY[0]];
//if both have changed..
if (movedXY[0] !== 0 && movedXY[1] !== 0) {
console.log(movedXY);
this._widget.set('xy', realXY);
}
//if only x is 0, set the Y
else if (movedXY[0] === 0) {
this._widget.set('y',realXY[1]);
}
//otherwise, y is 0, so set X
else if (movedXY[1] === 0){
this._widget.set('x', realXY[0]);
}
},
updateStopPosition: function(e) {
this._stoppedPosition = e.target.realXY;
}
});
Y.namespace('Plugin');
Y.Plugin.Drag = Drag;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment