1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre>/*
2 * This is a derivative of the similarly named class in the YUI Library.
3 * The original license:
4 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
5 * Code licensed under the BSD License:
6 * http://developer.yahoo.net/yui/license.txt
10 <span id='Ext-dd.DragDropManager'>/**
11 </span> * @class Ext.dd.DragDropManager
12 * DragDropManager is a singleton that tracks the element interaction for
13 * all DragDrop items in the window. Generally, you will not call
14 * this class directly, but it does have helper methods that could
15 * be useful in your DragDrop implementations.
18 Ext.define('Ext.dd.DragDropManager', {
21 requires: ['Ext.util.Region'],
23 uses: ['Ext.tip.QuickTipManager'],
25 // shorter ClassName, to save bytes and use internally
26 alternateClassName: ['Ext.dd.DragDropMgr', 'Ext.dd.DDM'],
28 <span id='Ext-dd.DragDropManager-property-ids'> /**
29 </span> * Two dimensional Array of registered DragDrop objects. The first
30 * dimension is the DragDrop item group, the second the DragDrop
39 <span id='Ext-dd.DragDropManager-property-handleIds'> /**
40 </span> * Array of element ids defined as drag handles. Used to determine
41 * if the element that generated the mousedown event is actually the
42 * handle and not the html element itself.
50 <span id='Ext-dd.DragDropManager-property-dragCurrent'> /**
51 </span> * the DragDrop object that is currently being dragged
52 * @property dragCurrent
59 <span id='Ext-dd.DragDropManager-property-dragOvers'> /**
60 </span> * the DragDrop object(s) that are being hovered over
68 <span id='Ext-dd.DragDropManager-property-deltaX'> /**
69 </span> * the X distance between the cursor and the object being dragged
77 <span id='Ext-dd.DragDropManager-property-deltaY'> /**
78 </span> * the Y distance between the cursor and the object being dragged
86 <span id='Ext-dd.DragDropManager-property-preventDefault'> /**
87 </span> * Flag to determine if we should prevent the default behavior of the
88 * events we define. By default this is true, but this can be set to
89 * false if you need the default behavior (not recommended)
90 * @property preventDefault
96 <span id='Ext-dd.DragDropManager-property-stopPropagation'> /**
97 </span> * Flag to determine if we should stop the propagation of the events
98 * we generate. This is true by default but you may want to set it to
99 * false if the html element contains other features that require the
101 * @property stopPropagation
105 stopPropagation: true,
107 <span id='Ext-dd.DragDropManager-property-initialized'> /**
108 </span> * Internal flag that is set to true when drag and drop has been
110 * @property initialized
116 <span id='Ext-dd.DragDropManager-property-locked'> /**
117 </span> * All drag and drop can be disabled.
124 <span id='Ext-dd.DragDropManager-method-init'> /**
125 </span> * Called the first time an element is registered.
131 this.initialized = true;
134 <span id='Ext-dd.DragDropManager-property-POINT'> /**
135 </span> * In point mode, drag and drop interaction is defined by the
136 * location of the cursor during the drag/drop
143 <span id='Ext-dd.DragDropManager-property-INTERSECT'> /**
144 </span> * In intersect mode, drag and drop interaction is defined by the
145 * overlap of two or more drag and drop objects.
146 * @property INTERSECT
152 <span id='Ext-dd.DragDropManager-property-mode'> /**
153 </span> * The current drag and drop mode. Default: POINT
160 <span id='Ext-dd.DragDropManager-method-_execOnAll'> /**
161 </span> * Runs method on all drag and drop objects
166 _execOnAll: function(sMethod, args) {
167 for (var i in this.ids) {
168 for (var j in this.ids[i]) {
169 var oDD = this.ids[i][j];
170 if (! this.isTypeOfDD(oDD)) {
173 oDD[sMethod].apply(oDD, args);
178 <span id='Ext-dd.DragDropManager-method-_onLoad'> /**
179 </span> * Drag and drop initialization. Sets up the global event handlers
184 _onLoad: function() {
188 var Event = Ext.EventManager;
189 Event.on(document, "mouseup", this.handleMouseUp, this, true);
190 Event.on(document, "mousemove", this.handleMouseMove, this, true);
191 Event.on(window, "unload", this._onUnload, this, true);
192 Event.on(window, "resize", this._onResize, this, true);
193 // Event.on(window, "mouseout", this._test);
197 <span id='Ext-dd.DragDropManager-method-_onResize'> /**
198 </span> * Reset constraints on all drag and drop objs
203 _onResize: function(e) {
204 this._execOnAll("resetConstraints", []);
207 <span id='Ext-dd.DragDropManager-method-lock'> /**
208 </span> * Lock all drag and drop functionality
212 lock: function() { this.locked = true; },
214 <span id='Ext-dd.DragDropManager-method-unlock'> /**
215 </span> * Unlock all drag and drop functionality
219 unlock: function() { this.locked = false; },
221 <span id='Ext-dd.DragDropManager-method-isLocked'> /**
222 </span> * Is drag and drop locked?
224 * @return {boolean} True if drag and drop is locked, false otherwise.
227 isLocked: function() { return this.locked; },
229 <span id='Ext-dd.DragDropManager-property-locationCache'> /**
230 </span> * Location cache that is set for all drag drop objects when a drag is
231 * initiated, cleared when the drag is finished.
232 * @property locationCache
238 <span id='Ext-dd.DragDropManager-property-useCache'> /**
239 </span> * Set useCache to false if you want to force object the lookup of each
240 * drag and drop linked element constantly during a drag.
247 <span id='Ext-dd.DragDropManager-property-clickPixelThresh'> /**
248 </span> * The number of pixels that the mouse needs to move after the
249 * mousedown before the drag is initiated. Default=3;
250 * @property clickPixelThresh
256 <span id='Ext-dd.DragDropManager-property-clickTimeThresh'> /**
257 </span> * The number of milliseconds after the mousedown event to initiate the
258 * drag if we don't get a mouseup event. Default=350
259 * @property clickTimeThresh
263 clickTimeThresh: 350,
265 <span id='Ext-dd.DragDropManager-property-dragThreshMet'> /**
266 </span> * Flag that indicates that either the drag pixel threshold or the
267 * mousdown time threshold has been met
268 * @property dragThreshMet
273 dragThreshMet: false,
275 <span id='Ext-dd.DragDropManager-property-clickTimeout'> /**
276 </span> * Timeout used for the click time threshold
277 * @property clickTimeout
284 <span id='Ext-dd.DragDropManager-property-startX'> /**
285 </span> * The X position of the mousedown event stored for later use when a
286 * drag threshold is met.
294 <span id='Ext-dd.DragDropManager-property-startY'> /**
295 </span> * The Y position of the mousedown event stored for later use when a
296 * drag threshold is met.
304 <span id='Ext-dd.DragDropManager-method-regDragDrop'> /**
305 </span> * Each DragDrop instance must be registered with the DragDropManager.
306 * This is executed in DragDrop.init()
307 * @method regDragDrop
308 * @param {DragDrop} oDD the DragDrop object to register
309 * @param {String} sGroup the name of the group this element belongs to
312 regDragDrop: function(oDD, sGroup) {
313 if (!this.initialized) { this.init(); }
315 if (!this.ids[sGroup]) {
316 this.ids[sGroup] = {};
318 this.ids[sGroup][oDD.id] = oDD;
321 <span id='Ext-dd.DragDropManager-method-removeDDFromGroup'> /**
322 </span> * Removes the supplied dd instance from the supplied group. Executed
323 * by DragDrop.removeFromGroup, so don't call this function directly.
324 * @method removeDDFromGroup
328 removeDDFromGroup: function(oDD, sGroup) {
329 if (!this.ids[sGroup]) {
330 this.ids[sGroup] = {};
333 var obj = this.ids[sGroup];
334 if (obj && obj[oDD.id]) {
339 <span id='Ext-dd.DragDropManager-method-_remove'> /**
340 </span> * Unregisters a drag and drop item. This is executed in
341 * DragDrop.unreg, use that method instead of calling this directly.
346 _remove: function(oDD) {
347 for (var g in oDD.groups) {
348 if (g && this.ids[g] && this.ids[g][oDD.id]) {
349 delete this.ids[g][oDD.id];
352 delete this.handleIds[oDD.id];
355 <span id='Ext-dd.DragDropManager-method-regHandle'> /**
356 </span> * Each DragDrop handle element must be registered. This is done
357 * automatically when executing DragDrop.setHandleElId()
359 * @param {String} sDDId the DragDrop id this element is a handle for
360 * @param {String} sHandleId the id of the element that is the drag
364 regHandle: function(sDDId, sHandleId) {
365 if (!this.handleIds[sDDId]) {
366 this.handleIds[sDDId] = {};
368 this.handleIds[sDDId][sHandleId] = sHandleId;
371 <span id='Ext-dd.DragDropManager-method-isDragDrop'> /**
372 </span> * Utility function to determine if a given element has been
373 * registered as a drag drop item.
375 * @param {String} id the element id to check
376 * @return {boolean} true if this element is a DragDrop item,
380 isDragDrop: function(id) {
381 return ( this.getDDById(id) ) ? true : false;
384 <span id='Ext-dd.DragDropManager-method-getRelated'> /**
385 </span> * Returns the drag and drop instances that are in all groups the
386 * passed in instance belongs to.
388 * @param {DragDrop} p_oDD the obj to get related data for
389 * @param {boolean} bTargetsOnly if true, only return targetable objs
390 * @return {DragDrop[]} the related instances
393 getRelated: function(p_oDD, bTargetsOnly) {
395 for (var i in p_oDD.groups) {
396 for (var j in this.ids[i]) {
397 var dd = this.ids[i][j];
398 if (! this.isTypeOfDD(dd)) {
401 if (!bTargetsOnly || dd.isTarget) {
402 oDDs[oDDs.length] = dd;
410 <span id='Ext-dd.DragDropManager-method-isLegalTarget'> /**
411 </span> * Returns true if the specified dd target is a legal target for
412 * the specifice drag obj
413 * @method isLegalTarget
414 * @param {DragDrop} oDD the drag obj
415 * @param {DragDrop} oTargetDD the target
416 * @return {boolean} true if the target is a legal target for the
420 isLegalTarget: function (oDD, oTargetDD) {
421 var targets = this.getRelated(oDD, true);
422 for (var i=0, len=targets.length;i<len;++i) {
423 if (targets[i].id == oTargetDD.id) {
431 <span id='Ext-dd.DragDropManager-method-isTypeOfDD'> /**
432 </span> * My goal is to be able to transparently determine if an object is
433 * typeof DragDrop, and the exact subclass of DragDrop. typeof
434 * returns "object", oDD.constructor.toString() always returns
435 * "DragDrop" and not the name of the subclass. So for now it just
436 * evaluates a well-known variable in DragDrop.
438 * @param {Object} the object to evaluate
439 * @return {boolean} true if typeof oDD = DragDrop
442 isTypeOfDD: function (oDD) {
443 return (oDD && oDD.__ygDragDrop);
446 <span id='Ext-dd.DragDropManager-method-isHandle'> /**
447 </span> * Utility function to determine if a given element has been
448 * registered as a drag drop handle for the given Drag Drop object.
450 * @param {String} id the element id to check
451 * @return {boolean} true if this element is a DragDrop handle, false
455 isHandle: function(sDDId, sHandleId) {
456 return ( this.handleIds[sDDId] &&
457 this.handleIds[sDDId][sHandleId] );
460 <span id='Ext-dd.DragDropManager-method-getDDById'> /**
461 </span> * Returns the DragDrop instance for a given id
463 * @param {String} id the id of the DragDrop object
464 * @return {DragDrop} the drag drop object, null if it is not found
467 getDDById: function(id) {
468 for (var i in this.ids) {
469 if (this.ids[i][id]) {
470 return this.ids[i][id];
476 <span id='Ext-dd.DragDropManager-method-handleMouseDown'> /**
477 </span> * Fired after a registered DragDrop object gets the mousedown event.
478 * Sets up the events required to track the object being dragged
479 * @method handleMouseDown
480 * @param {Event} e the event
481 * @param oDD the DragDrop object being dragged
485 handleMouseDown: function(e, oDD) {
486 if(Ext.tip.QuickTipManager){
487 Ext.tip.QuickTipManager.ddDisable();
489 if(this.dragCurrent){
490 // the original browser mouseup wasn't handled (e.g. outside FF browser window)
491 // so clean up first to avoid breaking the next drag
492 this.handleMouseUp(e);
495 this.currentTarget = e.getTarget();
496 this.dragCurrent = oDD;
498 var el = oDD.getEl();
500 // track start position
501 this.startX = e.getPageX();
502 this.startY = e.getPageY();
504 this.deltaX = this.startX - el.offsetLeft;
505 this.deltaY = this.startY - el.offsetTop;
507 this.dragThreshMet = false;
509 this.clickTimeout = setTimeout(
511 var DDM = Ext.dd.DragDropManager;
512 DDM.startDrag(DDM.startX, DDM.startY);
514 this.clickTimeThresh );
517 <span id='Ext-dd.DragDropManager-method-startDrag'> /**
518 </span> * Fired when either the drag pixel threshol or the mousedown hold
519 * time threshold has been met.
521 * @param x {int} the X position of the original mousedown
522 * @param y {int} the Y position of the original mousedown
525 startDrag: function(x, y) {
526 clearTimeout(this.clickTimeout);
527 if (this.dragCurrent) {
528 this.dragCurrent.b4StartDrag(x, y);
529 this.dragCurrent.startDrag(x, y);
531 this.dragThreshMet = true;
534 <span id='Ext-dd.DragDropManager-method-handleMouseUp'> /**
535 </span> * Internal function to handle the mouseup event. Will be invoked
536 * from the context of the document.
537 * @method handleMouseUp
538 * @param {Event} e the event
542 handleMouseUp: function(e) {
544 if(Ext.tip.QuickTipManager){
545 Ext.tip.QuickTipManager.ddEnable();
547 if (! this.dragCurrent) {
551 clearTimeout(this.clickTimeout);
553 if (this.dragThreshMet) {
554 this.fireEvents(e, true);
563 <span id='Ext-dd.DragDropManager-method-stopEvent'> /**
564 </span> * Utility to stop event propagation and event default, if these
565 * features are turned on.
567 * @param {Event} e the event as returned by this.getEvent()
570 stopEvent: function(e){
571 if(this.stopPropagation) {
575 if (this.preventDefault) {
580 <span id='Ext-dd.DragDropManager-method-stopDrag'> /**
581 </span> * Internal function to clean up event handlers after the drag
582 * operation is complete
584 * @param {Event} e the event
588 stopDrag: function(e) {
589 // Fire the drag end event for the item that was dragged
590 if (this.dragCurrent) {
591 if (this.dragThreshMet) {
592 this.dragCurrent.b4EndDrag(e);
593 this.dragCurrent.endDrag(e);
596 this.dragCurrent.onMouseUp(e);
599 this.dragCurrent = null;
603 <span id='Ext-dd.DragDropManager-method-handleMouseMove'> /**
604 </span> * Internal function to handle the mousemove event. Will be invoked
605 * from the context of the html element.
607 * @TODO figure out what we can do about mouse events lost when the
608 * user drags objects beyond the window boundary. Currently we can
609 * detect this in internet explorer by verifying that the mouse is
610 * down during the mousemove event. Firefox doesn't give us the
611 * button state on the mousemove event.
612 * @method handleMouseMove
613 * @param {Event} e the event
617 handleMouseMove: function(e) {
618 if (! this.dragCurrent) {
621 // var button = e.which || e.button;
623 // check for IE mouseup outside of page boundary
624 if (Ext.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
626 return this.handleMouseUp(e);
629 if (!this.dragThreshMet) {
630 var diffX = Math.abs(this.startX - e.getPageX());
631 var diffY = Math.abs(this.startY - e.getPageY());
632 if (diffX > this.clickPixelThresh ||
633 diffY > this.clickPixelThresh) {
634 this.startDrag(this.startX, this.startY);
638 if (this.dragThreshMet) {
639 this.dragCurrent.b4Drag(e);
640 this.dragCurrent.onDrag(e);
641 if(!this.dragCurrent.moveOnly){
642 this.fireEvents(e, false);
651 <span id='Ext-dd.DragDropManager-method-fireEvents'> /**
652 </span> * Iterates over all of the DragDrop elements to find ones we are
653 * hovering over or dropping on
655 * @param {Event} e the event
656 * @param {boolean} isDrop is this a drop op or a mouseover op?
660 fireEvents: function(e, isDrop) {
661 var dc = this.dragCurrent;
663 // If the user did the mouse up outside of the window, we could
664 // get here even though we have ended the drag.
665 if (!dc || dc.isLocked()) {
669 var pt = e.getPoint();
671 // cache the previous dragOver array
679 // Check to see if the object(s) we were hovering over is no longer
680 // being hovered over so we can fire the onDragOut event
681 for (var i in this.dragOvers) {
683 var ddo = this.dragOvers[i];
685 if (! this.isTypeOfDD(ddo)) {
689 if (! this.isOverTarget(pt, ddo, this.mode)) {
694 delete this.dragOvers[i];
697 for (var sGroup in dc.groups) {
699 if ("string" != typeof sGroup) {
703 for (i in this.ids[sGroup]) {
704 var oDD = this.ids[sGroup][i];
705 if (! this.isTypeOfDD(oDD)) {
709 if (oDD.isTarget && !oDD.isLocked() && ((oDD != dc) || (dc.ignoreSelf === false))) {
710 if (this.isOverTarget(pt, oDD, this.mode)) {
711 // look for drop interactions
713 dropEvts.push( oDD );
714 // look for drag enter and drag over interactions
717 // initial drag over: dragEnter fires
718 if (!oldOvers[oDD.id]) {
719 enterEvts.push( oDD );
720 // subsequent drag overs: dragOver fires
722 overEvts.push( oDD );
725 this.dragOvers[oDD.id] = oDD;
733 if (outEvts.length) {
734 dc.b4DragOut(e, outEvts);
735 dc.onDragOut(e, outEvts);
738 if (enterEvts.length) {
739 dc.onDragEnter(e, enterEvts);
742 if (overEvts.length) {
743 dc.b4DragOver(e, overEvts);
744 dc.onDragOver(e, overEvts);
747 if (dropEvts.length) {
748 dc.b4DragDrop(e, dropEvts);
749 dc.onDragDrop(e, dropEvts);
753 // fire dragout events
755 for (i=0, len=outEvts.length; i<len; ++i) {
756 dc.b4DragOut(e, outEvts[i].id);
757 dc.onDragOut(e, outEvts[i].id);
761 for (i=0,len=enterEvts.length; i<len; ++i) {
762 // dc.b4DragEnter(e, oDD.id);
763 dc.onDragEnter(e, enterEvts[i].id);
767 for (i=0,len=overEvts.length; i<len; ++i) {
768 dc.b4DragOver(e, overEvts[i].id);
769 dc.onDragOver(e, overEvts[i].id);
773 for (i=0, len=dropEvts.length; i<len; ++i) {
774 dc.b4DragDrop(e, dropEvts[i].id);
775 dc.onDragDrop(e, dropEvts[i].id);
780 // notify about a drop that did not find a target
781 if (isDrop && !dropEvts.length) {
787 <span id='Ext-dd.DragDropManager-method-getBestMatch'> /**
788 </span> * Helper function for getting the best match from the list of drag
789 * and drop objects returned by the drag and drop events when we are
790 * in INTERSECT mode. It returns either the first object that the
791 * cursor is over, or the object that has the greatest overlap with
792 * the dragged element.
793 * @method getBestMatch
794 * @param {DragDrop[]} dds The array of drag and drop objects
796 * @return {DragDrop} The best single match
799 getBestMatch: function(dds) {
801 // Return null if the input is not what we expect
802 //if (!dds || !dds.length || dds.length == 0) {
804 // If there is only one item, it wins
805 //} else if (dds.length == 1) {
807 var len = dds.length;
812 // Loop through the targeted items
813 for (var i=0; i<len; ++i) {
815 // If the cursor is over the object, it wins. If the
816 // cursor is over multiple matches, the first one we come
818 if (dd.cursorIsOver) {
821 // Otherwise the object with the most overlap wins
824 winner.overlap.getArea() < dd.overlap.getArea()) {
834 <span id='Ext-dd.DragDropManager-method-refreshCache'> /**
835 </span> * Refreshes the cache of the top-left and bottom-right points of the
836 * drag and drop objects in the specified group(s). This is in the
837 * format that is stored in the drag and drop instance, so typical
840 * Ext.dd.DragDropManager.refreshCache(ddinstance.groups);
844 * Ext.dd.DragDropManager.refreshCache({group1:true, group2:true});
846 * @TODO this really should be an indexed array. Alternatively this
847 * method could accept both.
848 * @method refreshCache
849 * @param {Object} groups an associative array of groups to refresh
852 refreshCache: function(groups) {
853 for (var sGroup in groups) {
854 if ("string" != typeof sGroup) {
857 for (var i in this.ids[sGroup]) {
858 var oDD = this.ids[sGroup][i];
860 if (this.isTypeOfDD(oDD)) {
861 // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
862 var loc = this.getLocation(oDD);
864 this.locationCache[oDD.id] = loc;
866 delete this.locationCache[oDD.id];
867 // this will unregister the drag and drop object if
868 // the element is not in a usable state
876 <span id='Ext-dd.DragDropManager-method-verifyEl'> /**
877 </span> * This checks to make sure an element exists and is in the DOM. The
878 * main purpose is to handle cases where innerHTML is used to remove
879 * drag and drop objects from the DOM. IE provides an 'unspecified
880 * error' when trying to access the offsetParent of such an element
882 * @param {HTMLElement} el the element to check
883 * @return {boolean} true if the element looks usable
886 verifyEl: function(el) {
891 parent = el.offsetParent;
894 parent = el.offsetParent;
904 <span id='Ext-dd.DragDropManager-method-getLocation'> /**
905 </span> * Returns a Region object containing the drag and drop element's position
906 * and size, including the padding configured for it
907 * @method getLocation
908 * @param {DragDrop} oDD the drag and drop object to get the
910 * @return {Ext.util.Region} a Region object representing the total area
911 * the element occupies, including any padding
912 * the instance is configured for.
915 getLocation: function(oDD) {
916 if (! this.isTypeOfDD(oDD)) {
920 //delegate getLocation method to the
921 //drag and drop target.
923 return oDD.getRegion();
926 var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
929 pos= Ext.core.Element.getXY(el);
937 x2 = x1 + el.offsetWidth;
939 y2 = y1 + el.offsetHeight;
941 t = y1 - oDD.padding[0];
942 r = x2 + oDD.padding[1];
943 b = y2 + oDD.padding[2];
944 l = x1 - oDD.padding[3];
946 return Ext.create('Ext.util.Region', t, r, b, l);
949 <span id='Ext-dd.DragDropManager-method-isOverTarget'> /**
950 </span> * Checks the cursor location to see if it over the target
951 * @method isOverTarget
952 * @param {Ext.util.Point} pt The point to evaluate
953 * @param {DragDrop} oTarget the DragDrop object we are inspecting
954 * @return {boolean} true if the mouse is over the target
958 isOverTarget: function(pt, oTarget, intersect) {
959 // use cache if available
960 var loc = this.locationCache[oTarget.id];
961 if (!loc || !this.useCache) {
962 loc = this.getLocation(oTarget);
963 this.locationCache[oTarget.id] = loc;
971 oTarget.cursorIsOver = loc.contains( pt );
973 // DragDrop is using this as a sanity check for the initial mousedown
974 // in this case we are done. In POINT mode, if the drag obj has no
975 // contraints, we are also done. Otherwise we need to evaluate the
976 // location of the target as related to the actual location of the
978 var dc = this.dragCurrent;
979 if (!dc || !dc.getTargetCoord ||
980 (!intersect && !dc.constrainX && !dc.constrainY)) {
981 return oTarget.cursorIsOver;
984 oTarget.overlap = null;
986 // Get the current location of the drag element, this is the
987 // location of the mouse event less the delta that represents
988 // where the original mousedown happened on the element. We
989 // need to consider constraints and ticks as well.
990 var pos = dc.getTargetCoord(pt.x, pt.y);
992 var el = dc.getDragEl();
993 var curRegion = Ext.create('Ext.util.Region', pos.y,
994 pos.x + el.offsetWidth,
995 pos.y + el.offsetHeight,
998 var overlap = curRegion.intersect(loc);
1001 oTarget.overlap = overlap;
1002 return (intersect) ? true : oTarget.cursorIsOver;
1008 <span id='Ext-dd.DragDropManager-method-_onUnload'> /**
1009 </span> * unload event handler
1014 _onUnload: function(e, me) {
1015 Ext.dd.DragDropManager.unregAll();
1018 <span id='Ext-dd.DragDropManager-method-unregAll'> /**
1019 </span> * Cleans up the drag and drop events and objects.
1024 unregAll: function() {
1026 if (this.dragCurrent) {
1028 this.dragCurrent = null;
1031 this._execOnAll("unreg", []);
1033 for (var i in this.elementCache) {
1034 delete this.elementCache[i];
1037 this.elementCache = {};
1041 <span id='Ext-dd.DragDropManager-property-elementCache'> /**
1042 </span> * A cache of DOM elements
1043 * @property elementCache
1049 <span id='Ext-dd.DragDropManager-method-getElWrapper'> /**
1050 </span> * Get the wrapper for the DOM element specified
1051 * @method getElWrapper
1052 * @param {String} id the id of the element to get
1053 * @return {Ext.dd.DDM.ElementWrapper} the wrapped element
1055 * @deprecated This wrapper isn't that useful
1058 getElWrapper: function(id) {
1059 var oWrapper = this.elementCache[id];
1060 if (!oWrapper || !oWrapper.el) {
1061 oWrapper = this.elementCache[id] =
1062 new this.ElementWrapper(Ext.getDom(id));
1067 <span id='Ext-dd.DragDropManager-method-getElement'> /**
1068 </span> * Returns the actual DOM element
1069 * @method getElement
1070 * @param {String} id the id of the elment to get
1071 * @return {Object} The element
1072 * @deprecated use Ext.lib.Ext.getDom instead
1075 getElement: function(id) {
1076 return Ext.getDom(id);
1079 <span id='Ext-dd.DragDropManager-method-getCss'> /**
1080 </span> * Returns the style property for the DOM element (i.e.,
1081 * document.getElById(id).style)
1083 * @param {String} id the id of the elment to get
1084 * @return {Object} The style property of the element
1087 getCss: function(id) {
1088 var el = Ext.getDom(id);
1089 return (el) ? el.style : null;
1092 <span id='Ext-dd.DragDropManager.ElementWrapper'> /**
1093 </span> * Inner class for cached elements
1094 * @class Ext.dd.DragDropManager.ElementWrapper
1095 * @for DragDropManager
1099 ElementWrapper: function(el) {
1100 <span id='Ext-dd.DragDropManager.ElementWrapper-property-el'> /**
1101 </span> * The element
1104 this.el = el || null;
1105 <span id='Ext-dd.DragDropManager.ElementWrapper-property-id'> /**
1106 </span> * The element id
1109 this.id = this.el && el.id;
1110 <span id='Ext-dd.DragDropManager.ElementWrapper-property-css'> /**
1111 </span> * A reference to the style property
1114 this.css = this.el && el.style;
1117 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getPosX'> /**
1118 </span> * Returns the X position of an html element
1120 * @param el the element for which to get the position
1121 * @return {int} the X coordinate
1122 * @for DragDropManager
1125 getPosX: function(el) {
1126 return Ext.core.Element.getX(el);
1129 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getPosY'> /**
1130 </span> * Returns the Y position of an html element
1132 * @param el the element for which to get the position
1133 * @return {int} the Y coordinate
1136 getPosY: function(el) {
1137 return Ext.core.Element.getY(el);
1140 <span id='Ext-dd.DragDropManager.ElementWrapper-method-swapNode'> /**
1141 </span> * Swap two nodes. In IE, we use the native method, for others we
1142 * emulate the IE behavior
1144 * @param n1 the first node to swap
1145 * @param n2 the other node to swap
1148 swapNode: function(n1, n2) {
1152 var p = n2.parentNode;
1153 var s = n2.nextSibling;
1156 p.insertBefore(n1, n2);
1157 } else if (n2 == n1.nextSibling) {
1158 p.insertBefore(n2, n1);
1160 n1.parentNode.replaceChild(n2, n1);
1161 p.insertBefore(n1, s);
1166 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getScroll'> /**
1167 </span> * Returns the current scroll position
1172 getScroll: function () {
1173 var doc = window.document,
1174 docEl = doc.documentElement,
1180 top = window.scrollYOffset;
1181 left = window.scrollXOffset;
1183 if (docEl && (docEl.scrollTop || docEl.scrollLeft)) {
1184 top = docEl.scrollTop;
1185 left = docEl.scrollLeft;
1187 top = body.scrollTop;
1188 left = body.scrollLeft;
1197 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getStyle'> /**
1198 </span> * Returns the specified element style property
1200 * @param {HTMLElement} el the element
1201 * @param {string} styleProp the style property
1202 * @return {string} The value of the style property
1205 getStyle: function(el, styleProp) {
1206 return Ext.fly(el).getStyle(styleProp);
1209 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getScrollTop'> /**
1210 </span> * Gets the scrollTop
1211 * @method getScrollTop
1212 * @return {int} the document's scrollTop
1215 getScrollTop: function () {
1216 return this.getScroll().top;
1219 <span id='Ext-dd.DragDropManager.ElementWrapper-method-getScrollLeft'> /**
1220 </span> * Gets the scrollLeft
1221 * @method getScrollLeft
1222 * @return {int} the document's scrollTop
1225 getScrollLeft: function () {
1226 return this.getScroll().left;
1229 <span id='Ext-dd.DragDropManager.ElementWrapper-method-moveToEl'> /**
1230 </span> * Sets the x/y position of an element to the location of the
1233 * @param {HTMLElement} moveEl The element to move
1234 * @param {HTMLElement} targetEl The position reference element
1237 moveToEl: function (moveEl, targetEl) {
1238 var aCoord = Ext.core.Element.getXY(targetEl);
1239 Ext.core.Element.setXY(moveEl, aCoord);
1242 <span id='Ext-dd.DragDropManager.ElementWrapper-method-numericSort'> /**
1243 </span> * Numeric array sort function
1244 * @method numericSort
1247 numericSort: function(a, b) {
1251 <span id='Ext-dd.DragDropManager.ElementWrapper-property-_timeoutCount'> /**
1252 </span> * Internal counter
1253 * @property _timeoutCount
1259 <span id='Ext-dd.DragDropManager.ElementWrapper-method-_addListeners'> /**
1260 </span> * Trying to make the load order less important. Without this we get
1261 * an error if this file is loaded before the Event Utility.
1262 * @method _addListeners
1266 _addListeners: function() {
1270 if (this._timeoutCount > 2000) {
1272 setTimeout(this._addListeners, 10);
1273 if (document && document.body) {
1274 this._timeoutCount += 1;
1280 <span id='Ext-dd.DragDropManager.ElementWrapper-method-handleWasClicked'> /**
1281 </span> * Recursively searches the immediate parent and all child nodes for
1282 * the handle element in order to determine wheter or not it was
1284 * @method handleWasClicked
1285 * @param node the html element to inspect
1288 handleWasClicked: function(node, id) {
1289 if (this.isHandle(id, node.id)) {
1292 // check to see if this is a text node child of the one we want
1293 var p = node.parentNode;
1296 if (this.isHandle(id, p.id)) {
1307 this._addListeners();
1309 </pre></pre></body></html>