X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/DragDropManager.html diff --git a/docs/source/DragDropManager.html b/docs/source/DragDropManager.html index 23148b13..2eb09db6 100644 --- a/docs/source/DragDropManager.html +++ b/docs/source/DragDropManager.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.DragDropManager * DragDropManager is a singleton that tracks the element interaction for * all DragDrop items in the window. Generally, you will not call @@ -24,144 +41,127 @@ Ext.define('Ext.dd.DragDropManager', { // shorter ClassName, to save bytes and use internally alternateClassName: ['Ext.dd.DragDropMgr', 'Ext.dd.DDM'], - - /** + + /** * Two dimensional Array of registered DragDrop objects. The first * dimension is the DragDrop item group, the second the DragDrop * object. * @property ids * @type String[] * @private - * @static */ ids: {}, - /** + /** * Array of element ids defined as drag handles. Used to determine * if the element that generated the mousedown event is actually the * handle and not the html element itself. * @property handleIds * @type String[] * @private - * @static */ handleIds: {}, - /** + /** * the DragDrop object that is currently being dragged - * @property dragCurrent - * @type DragDrop + * @property {Ext.dd.DragDrop} dragCurrent * @private - * @static **/ dragCurrent: null, - /** + /** * the DragDrop object(s) that are being hovered over - * @property dragOvers - * @type Array + * @property {Ext.dd.DragDrop[]} dragOvers * @private - * @static */ dragOvers: {}, - /** + /** * the X distance between the cursor and the object being dragged * @property deltaX - * @type int + * @type Number * @private - * @static */ deltaX: 0, - /** + /** * the Y distance between the cursor and the object being dragged * @property deltaY - * @type int + * @type Number * @private - * @static */ deltaY: 0, - /** + /** * Flag to determine if we should prevent the default behavior of the * events we define. By default this is true, but this can be set to * false if you need the default behavior (not recommended) * @property preventDefault - * @type boolean - * @static + * @type Boolean */ preventDefault: true, - /** + /** * Flag to determine if we should stop the propagation of the events * we generate. This is true by default but you may want to set it to * false if the html element contains other features that require the * mouse click. * @property stopPropagation - * @type boolean - * @static + * @type Boolean */ stopPropagation: true, - /** + /** * Internal flag that is set to true when drag and drop has been * intialized * @property initialized * @private - * @static */ initialized: false, - /** + /** * All drag and drop can be disabled. * @property locked * @private - * @static */ locked: false, - /** + /** * Called the first time an element is registered. * @method init * @private - * @static */ init: function() { this.initialized = true; }, - /** + /** * In point mode, drag and drop interaction is defined by the * location of the cursor during the drag/drop * @property POINT - * @type int - * @static + * @type Number */ POINT: 0, - /** + /** * In intersect mode, drag and drop interaction is defined by the * overlap of two or more drag and drop objects. * @property INTERSECT - * @type int - * @static + * @type Number */ INTERSECT: 1, - /** + /** * The current drag and drop mode. Default: POINT * @property mode - * @type int - * @static + * @type Number */ mode: 0, - /** + /** * Runs method on all drag and drop objects * @method _execOnAll * @private - * @static */ _execOnAll: function(sMethod, args) { for (var i in this.ids) { @@ -175,11 +175,10 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * Drag and drop initialization. Sets up the global event handlers * @method _onLoad * @private - * @static */ _onLoad: function() { @@ -194,120 +193,107 @@ Ext.define('Ext.dd.DragDropManager', { }, - /** + /** * Reset constraints on all drag and drop objs * @method _onResize * @private - * @static */ _onResize: function(e) { this._execOnAll("resetConstraints", []); }, - /** + /** * Lock all drag and drop functionality * @method lock - * @static */ lock: function() { this.locked = true; }, - /** + /** * Unlock all drag and drop functionality * @method unlock - * @static */ unlock: function() { this.locked = false; }, - /** + /** * Is drag and drop locked? * @method isLocked - * @return {boolean} True if drag and drop is locked, false otherwise. - * @static + * @return {Boolean} True if drag and drop is locked, false otherwise. */ isLocked: function() { return this.locked; }, - /** + /** * Location cache that is set for all drag drop objects when a drag is * initiated, cleared when the drag is finished. * @property locationCache * @private - * @static */ locationCache: {}, - /** + /** * Set useCache to false if you want to force object the lookup of each * drag and drop linked element constantly during a drag. * @property useCache - * @type boolean - * @static + * @type Boolean */ useCache: true, - /** + /** * The number of pixels that the mouse needs to move after the * mousedown before the drag is initiated. Default=3; * @property clickPixelThresh - * @type int - * @static + * @type Number */ clickPixelThresh: 3, - /** + /** * The number of milliseconds after the mousedown event to initiate the * drag if we don't get a mouseup event. Default=350 * @property clickTimeThresh - * @type int - * @static + * @type Number */ clickTimeThresh: 350, - /** + /** * Flag that indicates that either the drag pixel threshold or the * mousdown time threshold has been met * @property dragThreshMet - * @type boolean + * @type Boolean * @private - * @static */ dragThreshMet: false, - /** + /** * Timeout used for the click time threshold * @property clickTimeout * @type Object * @private - * @static */ clickTimeout: null, - /** + /** * The X position of the mousedown event stored for later use when a * drag threshold is met. * @property startX - * @type int + * @type Number * @private - * @static */ startX: 0, - /** + /** * The Y position of the mousedown event stored for later use when a * drag threshold is met. * @property startY - * @type int + * @type Number * @private - * @static */ startY: 0, - /** + /** * Each DragDrop instance must be registered with the DragDropManager. * This is executed in DragDrop.init() * @method regDragDrop - * @param {DragDrop} oDD the DragDrop object to register + * @param {Ext.dd.DragDrop} oDD the DragDrop object to register * @param {String} sGroup the name of the group this element belongs to - * @static */ regDragDrop: function(oDD, sGroup) { if (!this.initialized) { this.init(); } @@ -318,12 +304,11 @@ Ext.define('Ext.dd.DragDropManager', { this.ids[sGroup][oDD.id] = oDD; }, - /** + /** * Removes the supplied dd instance from the supplied group. Executed * by DragDrop.removeFromGroup, so don't call this function directly. * @method removeDDFromGroup * @private - * @static */ removeDDFromGroup: function(oDD, sGroup) { if (!this.ids[sGroup]) { @@ -336,12 +321,11 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * Unregisters a drag and drop item. This is executed in * DragDrop.unreg, use that method instead of calling this directly. * @method _remove * @private - * @static */ _remove: function(oDD) { for (var g in oDD.groups) { @@ -352,14 +336,13 @@ Ext.define('Ext.dd.DragDropManager', { delete this.handleIds[oDD.id]; }, - /** + /** * Each DragDrop handle element must be registered. This is done * automatically when executing DragDrop.setHandleElId() * @method regHandle * @param {String} sDDId the DragDrop id this element is a handle for * @param {String} sHandleId the id of the element that is the drag * handle - * @static */ regHandle: function(sDDId, sHandleId) { if (!this.handleIds[sDDId]) { @@ -368,27 +351,25 @@ Ext.define('Ext.dd.DragDropManager', { this.handleIds[sDDId][sHandleId] = sHandleId; }, - /** + /** * Utility function to determine if a given element has been * registered as a drag drop item. * @method isDragDrop * @param {String} id the element id to check - * @return {boolean} true if this element is a DragDrop item, + * @return {Boolean} true if this element is a DragDrop item, * false otherwise - * @static */ isDragDrop: function(id) { return ( this.getDDById(id) ) ? true : false; }, - /** + /** * Returns the drag and drop instances that are in all groups the * passed in instance belongs to. * @method getRelated - * @param {DragDrop} p_oDD the obj to get related data for - * @param {boolean} bTargetsOnly if true, only return targetable objs - * @return {DragDrop[]} the related instances - * @static + * @param {Ext.dd.DragDrop} p_oDD the obj to get related data for + * @param {Boolean} bTargetsOnly if true, only return targetable objs + * @return {Ext.dd.DragDrop[]} the related instances */ getRelated: function(p_oDD, bTargetsOnly) { var oDDs = []; @@ -407,15 +388,14 @@ Ext.define('Ext.dd.DragDropManager', { return oDDs; }, - /** + /** * Returns true if the specified dd target is a legal target for * the specifice drag obj * @method isLegalTarget - * @param {DragDrop} oDD the drag obj - * @param {DragDrop} oTargetDD the target - * @return {boolean} true if the target is a legal target for the + * @param {Ext.dd.DragDrop} oDD the drag obj + * @param {Ext.dd.DragDrop} oTargetDD the target + * @return {Boolean} true if the target is a legal target for the * dd obj - * @static */ isLegalTarget: function (oDD, oTargetDD) { var targets = this.getRelated(oDD, true); @@ -428,7 +408,7 @@ Ext.define('Ext.dd.DragDropManager', { return false; }, - /** + /** * My goal is to be able to transparently determine if an object is * typeof DragDrop, and the exact subclass of DragDrop. typeof * returns "object", oDD.constructor.toString() always returns @@ -436,33 +416,30 @@ Ext.define('Ext.dd.DragDropManager', { * evaluates a well-known variable in DragDrop. * @method isTypeOfDD * @param {Object} the object to evaluate - * @return {boolean} true if typeof oDD = DragDrop - * @static + * @return {Boolean} true if typeof oDD = DragDrop */ isTypeOfDD: function (oDD) { return (oDD && oDD.__ygDragDrop); }, - /** + /** * Utility function to determine if a given element has been * registered as a drag drop handle for the given Drag Drop object. * @method isHandle * @param {String} id the element id to check - * @return {boolean} true if this element is a DragDrop handle, false + * @return {Boolean} true if this element is a DragDrop handle, false * otherwise - * @static */ isHandle: function(sDDId, sHandleId) { return ( this.handleIds[sDDId] && this.handleIds[sDDId][sHandleId] ); }, - /** + /** * Returns the DragDrop instance for a given id * @method getDDById * @param {String} id the id of the DragDrop object - * @return {DragDrop} the drag drop object, null if it is not found - * @static + * @return {Ext.dd.DragDrop} the drag drop object, null if it is not found */ getDDById: function(id) { for (var i in this.ids) { @@ -473,14 +450,13 @@ Ext.define('Ext.dd.DragDropManager', { return null; }, - /** + /** * Fired after a registered DragDrop object gets the mousedown event. * Sets up the events required to track the object being dragged * @method handleMouseDown * @param {Event} e the event - * @param oDD the DragDrop object being dragged + * @param {Ext.dd.DragDrop} oDD the DragDrop object being dragged * @private - * @static */ handleMouseDown: function(e, oDD) { if(Ext.tip.QuickTipManager){ @@ -491,7 +467,7 @@ Ext.define('Ext.dd.DragDropManager', { // so clean up first to avoid breaking the next drag this.handleMouseUp(e); } - + this.currentTarget = e.getTarget(); this.dragCurrent = oDD; @@ -514,13 +490,12 @@ Ext.define('Ext.dd.DragDropManager', { this.clickTimeThresh ); }, - /** + /** * Fired when either the drag pixel threshol or the mousedown hold * time threshold has been met. * @method startDrag - * @param x {int} the X position of the original mousedown - * @param y {int} the Y position of the original mousedown - * @static + * @param {Number} x the X position of the original mousedown + * @param {Number} y the Y position of the original mousedown */ startDrag: function(x, y) { clearTimeout(this.clickTimeout); @@ -531,17 +506,16 @@ Ext.define('Ext.dd.DragDropManager', { this.dragThreshMet = true; }, - /** + /** * Internal function to handle the mouseup event. Will be invoked * from the context of the document. * @method handleMouseUp * @param {Event} e the event * @private - * @static */ handleMouseUp: function(e) { - if(Ext.tip.QuickTipManager){ + if(Ext.tip && Ext.tip.QuickTipManager){ Ext.tip.QuickTipManager.ddEnable(); } if (! this.dragCurrent) { @@ -560,12 +534,11 @@ Ext.define('Ext.dd.DragDropManager', { this.stopEvent(e); }, - /** + /** * Utility to stop event propagation and event default, if these * features are turned on. * @method stopEvent * @param {Event} e the event as returned by this.getEvent() - * @static */ stopEvent: function(e){ if(this.stopPropagation) { @@ -577,13 +550,12 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * Internal function to clean up event handlers after the drag * operation is complete * @method stopDrag * @param {Event} e the event * @private - * @static */ stopDrag: function(e) { // Fire the drag end event for the item that was dragged @@ -600,7 +572,7 @@ Ext.define('Ext.dd.DragDropManager', { this.dragOvers = {}; }, - /** + /** * Internal function to handle the mousemove event. Will be invoked * from the context of the html element. * @@ -612,7 +584,6 @@ Ext.define('Ext.dd.DragDropManager', { * @method handleMouseMove * @param {Event} e the event * @private - * @static */ handleMouseMove: function(e) { if (! this.dragCurrent) { @@ -648,14 +619,13 @@ Ext.define('Ext.dd.DragDropManager', { return true; }, - /** + /** * Iterates over all of the DragDrop elements to find ones we are * hovering over or dropping on * @method fireEvents * @param {Event} e the event - * @param {boolean} isDrop is this a drop op or a mouseover op? + * @param {Boolean} isDrop is this a drop op or a mouseover op? * @private - * @static */ fireEvents: function(e, isDrop) { var dc = this.dragCurrent; @@ -784,17 +754,16 @@ Ext.define('Ext.dd.DragDropManager', { }, - /** + /** * Helper function for getting the best match from the list of drag * and drop objects returned by the drag and drop events when we are * in INTERSECT mode. It returns either the first object that the * cursor is over, or the object that has the greatest overlap with * the dragged element. * @method getBestMatch - * @param {DragDrop[]} dds The array of drag and drop objects + * @param {Ext.dd.DragDrop[]} dds The array of drag and drop objects * targeted - * @return {DragDrop} The best single match - * @static + * @return {Ext.dd.DragDrop} The best single match */ getBestMatch: function(dds) { var winner = null; @@ -831,7 +800,7 @@ Ext.define('Ext.dd.DragDropManager', { return winner; }, - /** + /** * Refreshes the cache of the top-left and bottom-right points of the * drag and drop objects in the specified group(s). This is in the * format that is stored in the drag and drop instance, so typical @@ -847,7 +816,6 @@ Ext.define('Ext.dd.DragDropManager', { * method could accept both. * @method refreshCache * @param {Object} groups an associative array of groups to refresh - * @static */ refreshCache: function(groups) { for (var sGroup in groups) { @@ -873,15 +841,14 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * This checks to make sure an element exists and is in the DOM. The * main purpose is to handle cases where innerHTML is used to remove * drag and drop objects from the DOM. IE provides an 'unspecified * error' when trying to access the offsetParent of such an element * @method verifyEl * @param {HTMLElement} el the element to check - * @return {boolean} true if the element looks usable - * @static + * @return {Boolean} true if the element looks usable */ verifyEl: function(el) { if (el) { @@ -901,16 +868,14 @@ Ext.define('Ext.dd.DragDropManager', { return false; }, - /** + /** * Returns a Region object containing the drag and drop element's position * and size, including the padding configured for it * @method getLocation - * @param {DragDrop} oDD the drag and drop object to get the - * location for + * @param {Ext.dd.DragDrop} oDD the drag and drop object to get the location for. * @return {Ext.util.Region} a Region object representing the total area - * the element occupies, including any padding - * the instance is configured for. - * @static + * the element occupies, including any padding + * the instance is configured for. */ getLocation: function(oDD) { if (! this.isTypeOfDD(oDD)) { @@ -926,7 +891,7 @@ Ext.define('Ext.dd.DragDropManager', { var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l; try { - pos= Ext.core.Element.getXY(el); + pos= Ext.Element.getXY(el); } catch (e) { } if (!pos) { @@ -946,14 +911,13 @@ Ext.define('Ext.dd.DragDropManager', { return Ext.create('Ext.util.Region', t, r, b, l); }, - /** + /** * Checks the cursor location to see if it over the target * @method isOverTarget * @param {Ext.util.Point} pt The point to evaluate - * @param {DragDrop} oTarget the DragDrop object we are inspecting - * @return {boolean} true if the mouse is over the target + * @param {Ext.dd.DragDrop} oTarget the DragDrop object we are inspecting + * @return {Boolean} true if the mouse is over the target * @private - * @static */ isOverTarget: function(pt, oTarget, intersect) { // use cache if available @@ -1005,21 +969,19 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * unload event handler * @method _onUnload * @private - * @static */ _onUnload: function(e, me) { Ext.dd.DragDropManager.unregAll(); }, - /** + /** * Cleans up the drag and drop events and objects. * @method unregAll * @private - * @static */ unregAll: function() { @@ -1038,22 +1000,20 @@ Ext.define('Ext.dd.DragDropManager', { this.ids = {}; }, - /** + /** * A cache of DOM elements * @property elementCache * @private - * @static */ elementCache: {}, - /** + /** * Get the wrapper for the DOM element specified * @method getElWrapper * @param {String} id the id of the element to get - * @return {Ext.dd.DDM.ElementWrapper} the wrapped element + * @return {Ext.dd.DragDropManager.ElementWrapper} the wrapped element * @private * @deprecated This wrapper isn't that useful - * @static */ getElWrapper: function(id) { var oWrapper = this.elementCache[id]; @@ -1064,86 +1024,79 @@ Ext.define('Ext.dd.DragDropManager', { return oWrapper; }, - /** + /** * Returns the actual DOM element * @method getElement * @param {String} id the id of the elment to get * @return {Object} The element * @deprecated use Ext.lib.Ext.getDom instead - * @static */ getElement: function(id) { return Ext.getDom(id); }, - /** + /** * Returns the style property for the DOM element (i.e., * document.getElById(id).style) * @method getCss * @param {String} id the id of the elment to get * @return {Object} The style property of the element - * @static */ getCss: function(id) { var el = Ext.getDom(id); return (el) ? el.style : null; }, - /** - * Inner class for cached elements - * @class Ext.dd.DragDropManager.ElementWrapper - * @for DragDropManager + /** + * @class Ext.dd.DragDropManager.ElementWrapper + * Inner class for cached elements * @private * @deprecated */ ElementWrapper: function(el) { - /** - * The element - * @property el - */ - this.el = el || null; - /** - * The element id - * @property id - */ - this.id = this.el && el.id; - /** - * A reference to the style property - * @property css - */ - this.css = this.el && el.style; - }, - - /** + /** + * The element + * @property el + */ + this.el = el || null; + /** + * The element id + * @property id + */ + this.id = this.el && el.id; + /** + * A reference to the style property + * @property css + */ + this.css = this.el && el.style; + }, + + // The DragDropManager class continues + /** @class Ext.dd.DragDropManager */ + + /** * Returns the X position of an html element - * @method getPosX - * @param el the element for which to get the position - * @return {int} the X coordinate - * @for DragDropManager - * @static + * @param {HTMLElement} el the element for which to get the position + * @return {Number} the X coordinate */ getPosX: function(el) { - return Ext.core.Element.getX(el); + return Ext.Element.getX(el); }, - /** + /** * Returns the Y position of an html element - * @method getPosY - * @param el the element for which to get the position - * @return {int} the Y coordinate - * @static + * @param {HTMLElement} el the element for which to get the position + * @return {Number} the Y coordinate */ getPosY: function(el) { - return Ext.core.Element.getY(el); + return Ext.Element.getY(el); }, - /** + /** * Swap two nodes. In IE, we use the native method, for others we * emulate the IE behavior - * @method swapNode - * @param n1 the first node to swap - * @param n2 the other node to swap - * @static + * @param {HTMLElement} n1 the first node to swap + * @param {HTMLElement} n2 the other node to swap */ swapNode: function(n1, n2) { if (n1.swapNode) { @@ -1163,11 +1116,9 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * Returns the current scroll position - * @method getScroll * @private - * @static */ getScroll: function () { var doc = window.document, @@ -1175,7 +1126,7 @@ Ext.define('Ext.dd.DragDropManager', { body = doc.body, top = 0, left = 0; - + if (Ext.isGecko4) { top = window.scrollYOffset; left = window.scrollXOffset; @@ -1186,7 +1137,7 @@ Ext.define('Ext.dd.DragDropManager', { } else if (body) { top = body.scrollTop; left = body.scrollLeft; - } + } } return { top: top, @@ -1194,74 +1145,64 @@ Ext.define('Ext.dd.DragDropManager', { }; }, - /** + /** * Returns the specified element style property - * @method getStyle * @param {HTMLElement} el the element - * @param {string} styleProp the style property - * @return {string} The value of the style property - * @static + * @param {String} styleProp the style property + * @return {String} The value of the style property */ getStyle: function(el, styleProp) { return Ext.fly(el).getStyle(styleProp); }, - /** + /** * Gets the scrollTop - * @method getScrollTop - * @return {int} the document's scrollTop - * @static + * @return {Number} the document's scrollTop */ getScrollTop: function () { return this.getScroll().top; }, - /** + /** * Gets the scrollLeft - * @method getScrollLeft - * @return {int} the document's scrollTop - * @static + * @return {Number} the document's scrollTop */ getScrollLeft: function () { return this.getScroll().left; }, - /** + /** * Sets the x/y position of an element to the location of the * target element. - * @method moveToEl * @param {HTMLElement} moveEl The element to move * @param {HTMLElement} targetEl The position reference element - * @static */ moveToEl: function (moveEl, targetEl) { - var aCoord = Ext.core.Element.getXY(targetEl); - Ext.core.Element.setXY(moveEl, aCoord); + var aCoord = Ext.Element.getXY(targetEl); + Ext.Element.setXY(moveEl, aCoord); }, - /** + /** * Numeric array sort function - * @method numericSort - * @static + * @param {Number} a + * @param {Number} b + * @returns {Number} positive, negative or 0 */ numericSort: function(a, b) { return (a - b); }, - /** + /** * Internal counter - * @property _timeoutCount + * @property {Number} _timeoutCount * @private - * @static */ _timeoutCount: 0, - /** + /** * Trying to make the load order less important. Without this we get * an error if this file is loaded before the Event Utility. - * @method _addListeners * @private - * @static */ _addListeners: function() { if ( document ) { @@ -1277,13 +1218,11 @@ Ext.define('Ext.dd.DragDropManager', { } }, - /** + /** * Recursively searches the immediate parent and all child nodes for * the handle element in order to determine wheter or not it was * clicked. - * @method handleWasClicked - * @param node the html element to inspect - * @static + * @param {HTMLElement} node the html element to inspect */ handleWasClicked: function(node, id) { if (this.isHandle(id, node.id)) { @@ -1306,4 +1245,6 @@ Ext.define('Ext.dd.DragDropManager', { }, function() { this._addListeners(); }); -