X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/DragDrop.html diff --git a/docs/source/DragDrop.html b/docs/source/DragDrop.html index 56c0fc45..e702fb88 100644 --- a/docs/source/DragDrop.html +++ b/docs/source/DragDrop.html @@ -1,4 +1,21 @@ -
+ +/* + + + + +\ No newline at end of file +});The source code + + + + + + +/* * This is a derivative of the similarly named class in the YUI Library. * The original license: * Copyright (c) 2006, Yahoo! Inc. All rights reserved. @@ -7,7 +24,7 @@ */ -/** +/** * @class Ext.dd.DragDrop * Defines the interface and base operation of items that that can be * dragged or can be drop targets. It was designed to be extended, overriding @@ -60,7 +77,7 @@ Ext.define('Ext.dd.DragDrop', { } }, - /** + /** * Set to false to enable a DragDrop object to fire drag events while dragging * over its own Element. Defaults to true - DragDrop objects do not by default * fire drag events to themselves. @@ -68,7 +85,7 @@ Ext.define('Ext.dd.DragDrop', { * @type Boolean */ - /** + /** * The id of the element associated with this object. This is what we * refer to as the "linked element" because the size and position of * this element is used to determine when the drag and drop objects have @@ -78,14 +95,14 @@ Ext.define('Ext.dd.DragDrop', { */ id: null, - /** + /** * Configuration attributes passed into the constructor * @property config * @type object */ config: null, - /** + /** * The id of the element that will be dragged. By default this is same * as the linked element, but could be changed to another element. Ex: * Ext.dd.DDProxy @@ -95,7 +112,7 @@ Ext.define('Ext.dd.DragDrop', { */ dragElId: null, - /** + /** * The ID of the element that initiates the drag operation. By default * this is the linked element, but could be changed to be a child of this * element. This lets us do things like only starting the drag when the @@ -106,7 +123,7 @@ Ext.define('Ext.dd.DragDrop', { */ handleElId: null, - /** + /** * An object who's property names identify HTML tags to be considered invalid as drag handles. * A non-null property value identifies the tag as invalid. Defaults to the * following value which prevents drag operations from being initiated by <a> elements:<pre><code> @@ -118,7 +135,7 @@ Ext.define('Ext.dd.DragDrop', { */ invalidHandleTypes: null, - /** + /** * An object who's property names identify the IDs of elements to be considered invalid as drag handles. * A non-null property value identifies the ID as invalid. For example, to prevent * dragging from being initiated on element ID "foo", use:<pre><code> @@ -130,14 +147,14 @@ Ext.define('Ext.dd.DragDrop', { */ invalidHandleIds: null, - /** + /** * An Array of CSS class names for elements to be considered in valid as drag handles. * @property invalidHandleClasses * @type Array */ invalidHandleClasses: null, - /** + /** * The linked element's absolute X position at the time the drag was * started * @property startPageX @@ -146,7 +163,7 @@ Ext.define('Ext.dd.DragDrop', { */ startPageX: 0, - /** + /** * The linked element's absolute X position at the time the drag was * started * @property startPageY @@ -155,7 +172,7 @@ Ext.define('Ext.dd.DragDrop', { */ startPageY: 0, - /** + /** * The group defines a logical collection of DragDrop objects that are * related. Instances only get events when interacting with other * DragDrop object in the same group. This lets us define multiple @@ -165,7 +182,7 @@ Ext.define('Ext.dd.DragDrop', { */ groups: null, - /** + /** * Individual drag/drop instances can be locked. This will prevent * onmousedown start drag. * @property locked @@ -174,7 +191,7 @@ Ext.define('Ext.dd.DragDrop', { */ locked: false, - /** + /** * Lock this instance * @method lock */ @@ -182,7 +199,7 @@ Ext.define('Ext.dd.DragDrop', { this.locked = true; }, - /** + /** * When set to true, other DD objects in cooperating DDGroups do not receive * notification events when this DD object is dragged over them. Defaults to false. * @property moveOnly @@ -190,7 +207,7 @@ Ext.define('Ext.dd.DragDrop', { */ moveOnly: false, - /** + /** * Unlock this instace * @method unlock */ @@ -198,7 +215,7 @@ Ext.define('Ext.dd.DragDrop', { this.locked = false; }, - /** + /** * By default, all instances can be a drop target. This can be disabled by * setting isTarget to false. * @property isTarget @@ -206,29 +223,29 @@ Ext.define('Ext.dd.DragDrop', { */ isTarget: true, - /** + /** * The padding configured for this drag and drop object for calculating * the drop zone intersection with this object. - * @property padding - * @type int[] An array containing the 4 padding values: [top, right, bottom, left] + * An array containing the 4 padding values: [top, right, bottom, left] + * @property {[int]} padding */ padding: null, - /** + /** * Cached reference to the linked element * @property _domRef * @private */ _domRef: null, - /** + /** * Internal typeof flag * @property __ygDragDrop * @private */ __ygDragDrop: true, - /** + /** * Set to true when horizontal contraints are applied * @property constrainX * @type boolean @@ -236,7 +253,7 @@ Ext.define('Ext.dd.DragDrop', { */ constrainX: false, - /** + /** * Set to true when vertical contraints are applied * @property constrainY * @type boolean @@ -244,7 +261,7 @@ Ext.define('Ext.dd.DragDrop', { */ constrainY: false, - /** + /** * The left constraint * @property minX * @type int @@ -252,7 +269,7 @@ Ext.define('Ext.dd.DragDrop', { */ minX: 0, - /** + /** * The right constraint * @property maxX * @type int @@ -260,7 +277,7 @@ Ext.define('Ext.dd.DragDrop', { */ maxX: 0, - /** + /** * The up constraint * @property minY * @type int @@ -268,7 +285,7 @@ Ext.define('Ext.dd.DragDrop', { */ minY: 0, - /** + /** * The down constraint * @property maxY * @type int @@ -276,7 +293,7 @@ Ext.define('Ext.dd.DragDrop', { */ maxY: 0, - /** + /** * Maintain offsets when we resetconstraints. Set to true when you want * the position of the element relative to its parent to stay the same * when the page changes @@ -286,25 +303,23 @@ Ext.define('Ext.dd.DragDrop', { */ maintainOffset: false, - /** + /** * Array of pixel locations the element will snap to if we specified a * horizontal graduation/interval. This array is generated automatically * when you define a tick interval. - * @property xTicks - * @type int[] + * @property {[int]} xTicks */ xTicks: null, - /** + /** * Array of pixel locations the element will snap to if we specified a * vertical graduation/interval. This array is generated automatically * when you define a tick interval. - * @property yTicks - * @type int[] + * @property {[int]} yTicks */ yTicks: null, - /** + /** * By default the drag and drop instance will only respond to the primary * button click (left button for a right-handed mouse). Set to true to * allow drag and drop to start with any mouse click that is propogated @@ -314,14 +329,14 @@ Ext.define('Ext.dd.DragDrop', { */ primaryButtonOnly: true, - /** + /** * The available property is false until the linked dom element is accessible. * @property available * @type boolean */ available: false, - /** + /** * By default, drags can only be initiated if the mousedown occurs in the * region the linked element is. This is done in part to work around a * bug in some browsers that mis-report the mousedown if the previous @@ -334,14 +349,14 @@ Ext.define('Ext.dd.DragDrop', { */ hasOuterHandles: false, - /** + /** * Code that executes immediately before the startDrag event * @method b4StartDrag * @private */ b4StartDrag: function(x, y) { }, - /** + /** * Abstract method called after a drag/drop object is clicked * and the drag or mousedown time thresholds have beeen met. * @method startDrag @@ -350,14 +365,14 @@ Ext.define('Ext.dd.DragDrop', { */ startDrag: function(x, y) { /* override this */ }, - /** + /** * Code that executes immediately before the onDrag event * @method b4Drag * @private */ b4Drag: function(e) { }, - /** + /** * Abstract method called during the onMouseMove event while dragging an * object. * @method onDrag @@ -365,7 +380,7 @@ Ext.define('Ext.dd.DragDrop', { */ onDrag: function(e) { /* override this */ }, - /** + /** * Abstract method called when this element fist begins hovering over * another DragDrop obj * @method onDragEnter @@ -376,14 +391,14 @@ Ext.define('Ext.dd.DragDrop', { */ onDragEnter: function(e, id) { /* override this */ }, - /** + /** * Code that executes immediately before the onDragOver event * @method b4DragOver * @private */ b4DragOver: function(e) { }, - /** + /** * Abstract method called when this element is hovering over another * DragDrop obj * @method onDragOver @@ -394,14 +409,14 @@ Ext.define('Ext.dd.DragDrop', { */ onDragOver: function(e, id) { /* override this */ }, - /** + /** * Code that executes immediately before the onDragOut event * @method b4DragOut * @private */ b4DragOut: function(e) { }, - /** + /** * Abstract method called when we are no longer hovering over an element * @method onDragOut * @param {Event} e the mousemove event @@ -411,14 +426,14 @@ Ext.define('Ext.dd.DragDrop', { */ onDragOut: function(e, id) { /* override this */ }, - /** + /** * Code that executes immediately before the onDragDrop event * @method b4DragDrop * @private */ b4DragDrop: function(e) { }, - /** + /** * Abstract method called when this item is dropped on another DragDrop * obj * @method onDragDrop @@ -429,7 +444,7 @@ Ext.define('Ext.dd.DragDrop', { */ onDragDrop: function(e, id) { /* override this */ }, - /** + /** * Abstract method called when this item is dropped on an area with no * drop target * @method onInvalidDrop @@ -437,21 +452,21 @@ Ext.define('Ext.dd.DragDrop', { */ onInvalidDrop: function(e) { /* override this */ }, - /** + /** * Code that executes immediately before the endDrag event * @method b4EndDrag * @private */ b4EndDrag: function(e) { }, - /** + /** * Fired when we are done dragging the object * @method endDrag * @param {Event} e the mouseup event */ endDrag: function(e) { /* override this */ }, - /** + /** * Code executed immediately before the onMouseDown event * @method b4MouseDown * @param {Event} e the mousedown event @@ -459,21 +474,21 @@ Ext.define('Ext.dd.DragDrop', { */ b4MouseDown: function(e) { }, - /** + /** * Event handler that fires when a drag/drop obj gets a mousedown * @method onMouseDown * @param {Event} e the mousedown event */ onMouseDown: function(e) { /* override this */ }, - /** + /** * Event handler that fires when a drag/drop obj gets a mouseup * @method onMouseUp * @param {Event} e the mouseup event */ onMouseUp: function(e) { /* override this */ }, - /** + /** * Override the onAvailable method to do what is needed after the initial * position was determined. * @method onAvailable @@ -481,7 +496,7 @@ Ext.define('Ext.dd.DragDrop', { onAvailable: function () { }, - /** + /** * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}). * @type Object */ @@ -492,7 +507,7 @@ Ext.define('Ext.dd.DragDrop', { bottom: 0 }, - /** + /** * Initializes the drag drop object's constraints to restrict movement to a certain element. * * Usage: @@ -549,7 +564,7 @@ Ext.define('Ext.dd.DragDrop', { ); }, - /** + /** * Returns a reference to the linked element * @method getEl * @return {HTMLElement} the html element @@ -562,7 +577,7 @@ Ext.define('Ext.dd.DragDrop', { return this._domRef; }, - /** + /** * Returns a reference to the actual element to drag. By default this is * the same as the html element, but it can be assigned to another * element. An example of this can be found in Ext.dd.DDProxy @@ -573,7 +588,7 @@ Ext.define('Ext.dd.DragDrop', { return Ext.getDom(this.dragElId); }, - /** + /** * Sets up the DragDrop object. Must be called in the constructor of any * Ext.dd.DragDrop subclass * @method init @@ -587,7 +602,7 @@ Ext.define('Ext.dd.DragDrop', { // Ext.EventManager.on(this.id, "selectstart", Event.preventDefault); }, - /** + /** * Initializes Targeting functionality only... the object does not * get a mousedown handler. * @method initTarget @@ -634,7 +649,7 @@ Ext.define('Ext.dd.DragDrop', { this.handleOnAvailable(); }, - /** + /** * Applies the configuration parameters that were passed into the constructor. * This is supposed to happen at each level through the inheritance chain. So * a DDProxy implentation will execute apply config on DDProxy, DD, and @@ -653,7 +668,7 @@ Ext.define('Ext.dd.DragDrop', { }, - /** + /** * Executed when the linked element is available * @method handleOnAvailable * @private @@ -664,7 +679,7 @@ Ext.define('Ext.dd.DragDrop', { this.onAvailable(); }, - /** + /** * Configures the padding for the target zone in px. Effectively expands * (or reduces) the virtual object size for targeting calculations. * Supports css-style shorthand; if only one parameter is passed, all sides @@ -687,7 +702,7 @@ Ext.define('Ext.dd.DragDrop', { } }, - /** + /** * Stores the initial placement of the linked element. * @method setInitPosition * @param {int} diffX the X offset, default 0 @@ -714,7 +729,7 @@ Ext.define('Ext.dd.DragDrop', { this.setStartPosition(p); }, - /** + /** * Sets the start position of the element. This is set when the obj * is initialized, the reset when a drag is started. * @method setStartPosition @@ -729,7 +744,7 @@ Ext.define('Ext.dd.DragDrop', { this.startPageY = p[1]; }, - /** + /** * Add this instance to a group of related drag/drop objects. All * instances belong to at least one group, and can belong to as many * groups as needed. @@ -741,7 +756,7 @@ Ext.define('Ext.dd.DragDrop', { this.DDMInstance.regDragDrop(this, sGroup); }, - /** + /** * Remove's this instance from the supplied interaction group * @method removeFromGroup * @param {string} sGroup The group to drop @@ -754,7 +769,7 @@ Ext.define('Ext.dd.DragDrop', { this.DDMInstance.removeDDFromGroup(this, sGroup); }, - /** + /** * Allows you to specify that an element other than the linked element * will be moved with the cursor during a drag * @method setDragElId @@ -764,7 +779,7 @@ Ext.define('Ext.dd.DragDrop', { this.dragElId = id; }, - /** + /** * Allows you to specify a child of the linked element that should be * used to initiate the drag operation. An example of this would be if * you have a content div with text and links. Clicking anywhere in the @@ -783,7 +798,7 @@ Ext.define('Ext.dd.DragDrop', { this.DDMInstance.regHandle(this.id, id); }, - /** + /** * Allows you to set an element outside of the linked element as a drag * handle * @method setOuterHandleElId @@ -799,7 +814,7 @@ Ext.define('Ext.dd.DragDrop', { this.hasOuterHandles = true; }, - /** + /** * Remove all drag and drop hooks for this element * @method unreg */ @@ -813,7 +828,7 @@ Ext.define('Ext.dd.DragDrop', { this.unreg(); }, - /** + /** * Returns true if this instance is locked, or the drag drop mgr is locked * (meaning that all drag/drop is disabled on the page.) * @method isLocked @@ -824,7 +839,7 @@ Ext.define('Ext.dd.DragDrop', { return (this.DDMInstance.isLocked() || this.locked); }, - /** + /** * Fired when this object is clicked * @method handleMouseDown * @param {Event} e @@ -868,7 +883,7 @@ Ext.define('Ext.dd.DragDrop', { this.DDMInstance.handleWasClicked(target, this.id)) ); }, - /** + /** * Allows you to specify a tag name that should not start a drag operation * when clicked. This is designed to facilitate embedding links within a * drag handle that do something other than start the drag. @@ -880,7 +895,7 @@ Ext.define('Ext.dd.DragDrop', { this.invalidHandleTypes[type] = type; }, - /** + /** * Lets you to specify an element id for a child of a drag handle * that should not initiate a drag * @method addInvalidHandleId @@ -893,7 +908,7 @@ Ext.define('Ext.dd.DragDrop', { this.invalidHandleIds[id] = id; }, - /** + /** * Lets you specify a css class of elements that will not initiate a drag * @method addInvalidHandleClass * @param {string} cssClass the class of the elements you wish to ignore @@ -902,7 +917,7 @@ Ext.define('Ext.dd.DragDrop', { this.invalidHandleClasses.push(cssClass); }, - /** + /** * Unsets an excluded tag name set by addInvalidHandleType * @method removeInvalidHandleType * @param {string} tagName the type of element to unexclude @@ -913,7 +928,7 @@ Ext.define('Ext.dd.DragDrop', { delete this.invalidHandleTypes[type]; }, - /** + /** * Unsets an invalid handle id * @method removeInvalidHandleId * @param {string} id the id of the element to re-enable @@ -925,7 +940,7 @@ Ext.define('Ext.dd.DragDrop', { delete this.invalidHandleIds[id]; }, - /** + /** * Unsets an invalid css class * @method removeInvalidHandleClass * @param {string} cssClass the class of the element(s) you wish to @@ -939,7 +954,7 @@ Ext.define('Ext.dd.DragDrop', { } }, - /** + /** * Checks the tag exclusion list to see if this click should be ignored * @method isValidHandleChild * @param {HTMLElement} node the HTMLElement to evaluate @@ -967,7 +982,7 @@ Ext.define('Ext.dd.DragDrop', { }, - /** + /** * Create the array of horizontal tick marks if an interval was specified * in setXConstraint(). * @method setXTicks @@ -996,7 +1011,7 @@ Ext.define('Ext.dd.DragDrop', { Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort); }, - /** + /** * Create the array of vertical tick marks if an interval was specified in * setYConstraint(). * @method setYTicks @@ -1025,7 +1040,7 @@ Ext.define('Ext.dd.DragDrop', { Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort); }, - /** + /** * By default, the element can be dragged any place on the screen. Use * this method to limit the horizontal travel of the element. Pass in * 0,0 for the parameters if you want to lock the drag to the y axis. @@ -1048,7 +1063,7 @@ Ext.define('Ext.dd.DragDrop', { this.constrainX = true; }, - /** + /** * Clears any constraints applied to this instance. Also clears ticks * since they can't exist independent of a constraint at this time. * @method clearConstraints @@ -1059,7 +1074,7 @@ Ext.define('Ext.dd.DragDrop', { this.clearTicks(); }, - /** + /** * Clears any tick interval defined for this instance * @method clearTicks */ @@ -1070,7 +1085,7 @@ Ext.define('Ext.dd.DragDrop', { this.yTickSize = 0; }, - /** + /** * By default, the element can be dragged any place on the screen. Set * this to limit the vertical travel of the element. Pass in 0,0 for the * parameters if you want to lock the drag to the x axis. @@ -1092,7 +1107,7 @@ Ext.define('Ext.dd.DragDrop', { }, - /** + /** * resetConstraints must be called if you manually reposition a dd element. * @method resetConstraints * @param {boolean} maintainOffset @@ -1124,7 +1139,7 @@ Ext.define('Ext.dd.DragDrop', { } }, - /** + /** * Normally the drag element is moved pixel by pixel, but we can specify * that it move a number of pixels at a time. This method resolves the * location when we have it set up like this. @@ -1159,7 +1174,7 @@ Ext.define('Ext.dd.DragDrop', { } }, - /** + /** * toString method * @method toString * @return {string} string representation of the dd obj @@ -1168,4 +1183,6 @@ Ext.define('Ext.dd.DragDrop', { return ("DragDrop " + this.id); } -});