koha-tmpl/intranet-tmpl/prog/en/lib/yui/dragdrop/dragdrop-debug.js

   1 /*
   2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.8.0r4
   6 */
   7 /**
   8  * The drag and drop utility provides a framework for building drag and drop
   9  * applications.  In addition to enabling drag and drop for specific elements,
  10  * the drag and drop elements are tracked by the manager class, and the
  11  * interactions between the various elements are tracked during the drag and
  12  * the implementing code is notified about these important moments.
  13  * @module dragdrop
  14  * @title Drag and Drop
  15  * @requires yahoo,dom,event
  16  * @namespace YAHOO.util
  17  */
  18
  19 // Only load the library once.  Rewriting the manager class would orphan
  20 // existing drag and drop instances.
  21 if (!YAHOO.util.DragDropMgr) {
  22
  23 /**
  24  * DragDropMgr is a singleton that tracks the element interaction for
  25  * all DragDrop items in the window.  Generally, you will not call
  26  * this class directly, but it does have helper methods that could
  27  * be useful in your DragDrop implementations.
  28  * @class DragDropMgr
  29  * @static
  30  */
  31 YAHOO.util.DragDropMgr = function() {
  32
  33     var Event = YAHOO.util.Event,
  34         Dom = YAHOO.util.Dom;
  35
  36     return {
  37         /**
  38         * This property is used to turn on global use of the shim element on all DragDrop instances, defaults to false for backcompat. (Use: YAHOO.util.DDM.useShim = true)
  39         * @property useShim
  40         * @type Boolean
  41         * @static
  42         */
  43         useShim: false,
  44         /**
  45         * This property is used to determine if the shim is active over the screen, default false.
  46         * @private
  47         * @property _shimActive
  48         * @type Boolean
  49         * @static
  50         */
  51         _shimActive: false,
  52         /**
  53         * This property is used when useShim is set on a DragDrop object to store the current state of DDM.useShim so it can be reset when a drag operation is done.
  54         * @private
  55         * @property _shimState
  56         * @type Boolean
  57         * @static
  58         */
  59         _shimState: false,
  60         /**
  61         * This property is used when useShim is set to true, it will set the opacity on the shim to .5 for debugging. Use: (YAHOO.util.DDM._debugShim = true;)
  62         * @private
  63         * @property _debugShim
  64         * @type Boolean
  65         * @static
  66         */
  67         _debugShim: false,
  68         /**
  69         * This method will create a shim element (giving it the id of yui-ddm-shim), it also attaches the mousemove and mouseup listeners to it and attaches a scroll listener on the window
  70         * @private
  71         * @method _sizeShim
  72         * @static
  73         */
  74         _createShim: function() {
  75             YAHOO.log('Creating Shim Element', 'info', 'DragDropMgr');
  76             var s = document.createElement('div');
  77             s.id = 'yui-ddm-shim';
  78             if (document.body.firstChild) {
  79                 document.body.insertBefore(s, document.body.firstChild);
  80             } else {
  81                 document.body.appendChild(s);
  82             }
  83             s.style.display = 'none';
  84             s.style.backgroundColor = 'red';
  85             s.style.position = 'absolute';
  86             s.style.zIndex = '99999';
  87             Dom.setStyle(s, 'opacity', '0');
  88             this._shim = s;
  89             Event.on(s, "mouseup",   this.handleMouseUp, this, true);
  90             Event.on(s, "mousemove", this.handleMouseMove, this, true);
  91             Event.on(window, 'scroll', this._sizeShim, this, true);
  92         },
  93         /**
  94         * This method will size the shim, called from activate and on window scroll event
  95         * @private
  96         * @method _sizeShim
  97         * @static
  98         */
  99         _sizeShim: function() {
 100             if (this._shimActive) {
 101                 YAHOO.log('Sizing Shim', 'info', 'DragDropMgr');
 102                 var s = this._shim;
 103                 s.style.height = Dom.getDocumentHeight() + 'px';
 104                 s.style.width = Dom.getDocumentWidth() + 'px';
 105                 s.style.top = '0';
 106                 s.style.left = '0';
 107             }
 108         },
 109         /**
 110         * This method will create the shim element if needed, then show the shim element, size the element and set the _shimActive property to true
 111         * @private
 112         * @method _activateShim
 113         * @static
 114         */
 115         _activateShim: function() {
 116             if (this.useShim) {
 117                 YAHOO.log('Activating Shim', 'info', 'DragDropMgr');
 118                 if (!this._shim) {
 119                     this._createShim();
 120                 }
 121                 this._shimActive = true;
 122                 var s = this._shim,
 123                     o = '0';
 124                 if (this._debugShim) {
 125                     o = '.5';
 126                 }
 127                 Dom.setStyle(s, 'opacity', o);
 128                 this._sizeShim();
 129                 s.style.display = 'block';
 130             }
 131         },
 132         /**
 133         * This method will hide the shim element and set the _shimActive property to false
 134         * @private
 135         * @method _deactivateShim
 136         * @static
 137         */
 138         _deactivateShim: function() {
 139             YAHOO.log('Deactivating Shim', 'info', 'DragDropMgr');
 140             this._shim.style.display = 'none';
 141             this._shimActive = false;
 142         },
 143         /**
 144         * The HTML element created to use as a shim over the document to track mouse movements
 145         * @private
 146         * @property _shim
 147         * @type HTMLElement
 148         * @static
 149         */
 150         _shim: null,
 151         /**
 152          * Two dimensional Array of registered DragDrop objects.  The first
 153          * dimension is the DragDrop item group, the second the DragDrop
 154          * object.
 155          * @property ids
 156          * @type {string: string}
 157          * @private
 158          * @static
 159          */
 160         ids: {},
 161
 162         /**
 163          * Array of element ids defined as drag handles.  Used to determine
 164          * if the element that generated the mousedown event is actually the
 165          * handle and not the html element itself.
 166          * @property handleIds
 167          * @type {string: string}
 168          * @private
 169          * @static
 170          */
 171         handleIds: {},
 172
 173         /**
 174          * the DragDrop object that is currently being dragged
 175          * @property dragCurrent
 176          * @type DragDrop
 177          * @private
 178          * @static
 179          **/
 180         dragCurrent: null,
 181
 182         /**
 183          * the DragDrop object(s) that are being hovered over
 184          * @property dragOvers
 185          * @type Array
 186          * @private
 187          * @static
 188          */
 189         dragOvers: {},
 190
 191         /**
 192          * the X distance between the cursor and the object being dragged
 193          * @property deltaX
 194          * @type int
 195          * @private
 196          * @static
 197          */
 198         deltaX: 0,
 199
 200         /**
 201          * the Y distance between the cursor and the object being dragged
 202          * @property deltaY
 203          * @type int
 204          * @private
 205          * @static
 206          */
 207         deltaY: 0,
 208
 209         /**
 210          * Flag to determine if we should prevent the default behavior of the
 211          * events we define. By default this is true, but this can be set to
 212          * false if you need the default behavior (not recommended)
 213          * @property preventDefault
 214          * @type boolean
 215          * @static
 216          */
 217         preventDefault: true,
 218
 219         /**
 220          * Flag to determine if we should stop the propagation of the events
 221          * we generate. This is true by default but you may want to set it to
 222          * false if the html element contains other features that require the
 223          * mouse click.
 224          * @property stopPropagation
 225          * @type boolean
 226          * @static
 227          */
 228         stopPropagation: true,
 229
 230         /**
 231          * Internal flag that is set to true when drag and drop has been
 232          * initialized
 233          * @property initialized
 234          * @private
 235          * @static
 236          */
 237         initialized: false,
 238
 239         /**
 240          * All drag and drop can be disabled.
 241          * @property locked
 242          * @private
 243          * @static
 244          */
 245         locked: false,
 246
 247         /**
 248          * Provides additional information about the current set of
 249          * interactions.  Can be accessed from the event handlers. It
 250          * contains the following properties:
 251          *
 252          *       out:       onDragOut interactions
 253          *       enter:     onDragEnter interactions
 254          *       over:      onDragOver interactions
 255          *       drop:      onDragDrop interactions
 256          *       point:     The location of the cursor
 257          *       draggedRegion: The location of dragged element at the time
 258          *                      of the interaction
 259          *       sourceRegion: The location of the source elemtn at the time
 260          *                     of the interaction
 261          *       validDrop: boolean
 262          * @property interactionInfo
 263          * @type object
 264          * @static
 265          */
 266         interactionInfo: null,
 267
 268         /**
 269          * Called the first time an element is registered.
 270          * @method init
 271          * @private
 272          * @static
 273          */
 274         init: function() {
 275             this.initialized = true;
 276         },
 277
 278         /**
 279          * In point mode, drag and drop interaction is defined by the
 280          * location of the cursor during the drag/drop
 281          * @property POINT
 282          * @type int
 283          * @static
 284          * @final
 285          */
 286         POINT: 0,
 287
 288         /**
 289          * In intersect mode, drag and drop interaction is defined by the
 290          * cursor position or the amount of overlap of two or more drag and
 291          * drop objects.
 292          * @property INTERSECT
 293          * @type int
 294          * @static
 295          * @final
 296          */
 297         INTERSECT: 1,
 298
 299         /**
 300          * In intersect mode, drag and drop interaction is defined only by the
 301          * overlap of two or more drag and drop objects.
 302          * @property STRICT_INTERSECT
 303          * @type int
 304          * @static
 305          * @final
 306          */
 307         STRICT_INTERSECT: 2,
 308
 309         /**
 310          * The current drag and drop mode.  Default: POINT
 311          * @property mode
 312          * @type int
 313          * @static
 314          */
 315         mode: 0,
 316
 317         /**
 318          * Runs method on all drag and drop objects
 319          * @method _execOnAll
 320          * @private
 321          * @static
 322          */
 323         _execOnAll: function(sMethod, args) {
 324             for (var i in this.ids) {
 325                 for (var j in this.ids[i]) {
 326                     var oDD = this.ids[i][j];
 327                     if (! this.isTypeOfDD(oDD)) {
 328                         continue;
 329                     }
 330                     oDD[sMethod].apply(oDD, args);
 331                 }
 332             }
 333         },
 334
 335         /**
 336          * Drag and drop initialization.  Sets up the global event handlers
 337          * @method _onLoad
 338          * @private
 339          * @static
 340          */
 341         _onLoad: function() {
 342
 343             this.init();
 344
 345             YAHOO.log("DragDropMgr onload", "info", "DragDropMgr");
 346             Event.on(document, "mouseup",   this.handleMouseUp, this, true);
 347             Event.on(document, "mousemove", this.handleMouseMove, this, true);
 348             Event.on(window,   "unload",    this._onUnload, this, true);
 349             Event.on(window,   "resize",    this._onResize, this, true);
 350             // Event.on(window,   "mouseout",    this._test);
 351
 352         },
 353
 354         /**
 355          * Reset constraints on all drag and drop objs
 356          * @method _onResize
 357          * @private
 358          * @static
 359          */
 360         _onResize: function(e) {
 361             YAHOO.log("window resize", "info", "DragDropMgr");
 362             this._execOnAll("resetConstraints", []);
 363         },
 364
 365         /**
 366          * Lock all drag and drop functionality
 367          * @method lock
 368          * @static
 369          */
 370         lock: function() { this.locked = true; },
 371
 372         /**
 373          * Unlock all drag and drop functionality
 374          * @method unlock
 375          * @static
 376          */
 377         unlock: function() { this.locked = false; },
 378
 379         /**
 380          * Is drag and drop locked?
 381          * @method isLocked
 382          * @return {boolean} True if drag and drop is locked, false otherwise.
 383          * @static
 384          */
 385         isLocked: function() { return this.locked; },
 386
 387         /**
 388          * Location cache that is set for all drag drop objects when a drag is
 389          * initiated, cleared when the drag is finished.
 390          * @property locationCache
 391          * @private
 392          * @static
 393          */
 394         locationCache: {},
 395
 396         /**
 397          * Set useCache to false if you want to force object the lookup of each
 398          * drag and drop linked element constantly during a drag.
 399          * @property useCache
 400          * @type boolean
 401          * @static
 402          */
 403         useCache: true,
 404
 405         /**
 406          * The number of pixels that the mouse needs to move after the
 407          * mousedown before the drag is initiated.  Default=3;
 408          * @property clickPixelThresh
 409          * @type int
 410          * @static
 411          */
 412         clickPixelThresh: 3,
 413
 414         /**
 415          * The number of milliseconds after the mousedown event to initiate the
 416          * drag if we don't get a mouseup event. Default=1000
 417          * @property clickTimeThresh
 418          * @type int
 419          * @static
 420          */
 421         clickTimeThresh: 1000,
 422
 423         /**
 424          * Flag that indicates that either the drag pixel threshold or the
 425          * mousdown time threshold has been met
 426          * @property dragThreshMet
 427          * @type boolean
 428          * @private
 429          * @static
 430          */
 431         dragThreshMet: false,
 432
 433         /**
 434          * Timeout used for the click time threshold
 435          * @property clickTimeout
 436          * @type Object
 437          * @private
 438          * @static
 439          */
 440         clickTimeout: null,
 441
 442         /**
 443          * The X position of the mousedown event stored for later use when a
 444          * drag threshold is met.
 445          * @property startX
 446          * @type int
 447          * @private
 448          * @static
 449          */
 450         startX: 0,
 451
 452         /**
 453          * The Y position of the mousedown event stored for later use when a
 454          * drag threshold is met.
 455          * @property startY
 456          * @type int
 457          * @private
 458          * @static
 459          */
 460         startY: 0,
 461
 462         /**
 463          * Flag to determine if the drag event was fired from the click timeout and
 464          * not the mouse move threshold.
 465          * @property fromTimeout
 466          * @type boolean
 467          * @private
 468          * @static
 469          */
 470         fromTimeout: false,
 471
 472         /**
 473          * Each DragDrop instance must be registered with the DragDropMgr.
 474          * This is executed in DragDrop.init()
 475          * @method regDragDrop
 476          * @param {DragDrop} oDD the DragDrop object to register
 477          * @param {String} sGroup the name of the group this element belongs to
 478          * @static
 479          */
 480         regDragDrop: function(oDD, sGroup) {
 481             if (!this.initialized) { this.init(); }
 482
 483             if (!this.ids[sGroup]) {
 484                 this.ids[sGroup] = {};
 485             }
 486             this.ids[sGroup][oDD.id] = oDD;
 487         },
 488
 489         /**
 490          * Removes the supplied dd instance from the supplied group. Executed
 491          * by DragDrop.removeFromGroup, so don't call this function directly.
 492          * @method removeDDFromGroup
 493          * @private
 494          * @static
 495          */
 496         removeDDFromGroup: function(oDD, sGroup) {
 497             if (!this.ids[sGroup]) {
 498                 this.ids[sGroup] = {};
 499             }
 500
 501             var obj = this.ids[sGroup];
 502             if (obj && obj[oDD.id]) {
 503                 delete obj[oDD.id];
 504             }
 505         },
 506
 507         /**
 508          * Unregisters a drag and drop item.  This is executed in
 509          * DragDrop.unreg, use that method instead of calling this directly.
 510          * @method _remove
 511          * @private
 512          * @static
 513          */
 514         _remove: function(oDD) {
 515             for (var g in oDD.groups) {
 516                 if (g) {
 517                     var item = this.ids[g];
 518                     if (item && item[oDD.id]) {
 519                         delete item[oDD.id];
 520                     }
 521                 }
 522
 523             }
 524             delete this.handleIds[oDD.id];
 525         },
 526
 527         /**
 528          * Each DragDrop handle element must be registered.  This is done
 529          * automatically when executing DragDrop.setHandleElId()
 530          * @method regHandle
 531          * @param {String} sDDId the DragDrop id this element is a handle for
 532          * @param {String} sHandleId the id of the element that is the drag
 533          * handle
 534          * @static
 535          */
 536         regHandle: function(sDDId, sHandleId) {
 537             if (!this.handleIds[sDDId]) {
 538                 this.handleIds[sDDId] = {};
 539             }
 540             this.handleIds[sDDId][sHandleId] = sHandleId;
 541         },
 542
 543         /**
 544          * Utility function to determine if a given element has been
 545          * registered as a drag drop item.
 546          * @method isDragDrop
 547          * @param {String} id the element id to check
 548          * @return {boolean} true if this element is a DragDrop item,
 549          * false otherwise
 550          * @static
 551          */
 552         isDragDrop: function(id) {
 553             return ( this.getDDById(id) ) ? true : false;
 554         },
 555
 556         /**
 557          * Returns the drag and drop instances that are in all groups the
 558          * passed in instance belongs to.
 559          * @method getRelated
 560          * @param {DragDrop} p_oDD the obj to get related data for
 561          * @param {boolean} bTargetsOnly if true, only return targetable objs
 562          * @return {DragDrop[]} the related instances
 563          * @static
 564          */
 565         getRelated: function(p_oDD, bTargetsOnly) {
 566             var oDDs = [];
 567             for (var i in p_oDD.groups) {
 568                 for (var j in this.ids[i]) {
 569                     var dd = this.ids[i][j];
 570                     if (! this.isTypeOfDD(dd)) {
 571                         continue;
 572                     }
 573                     if (!bTargetsOnly || dd.isTarget) {
 574                         oDDs[oDDs.length] = dd;
 575                     }
 576                 }
 577             }
 578
 579             return oDDs;
 580         },
 581
 582         /**
 583          * Returns true if the specified dd target is a legal target for
 584          * the specifice drag obj
 585          * @method isLegalTarget
 586          * @param {DragDrop} the drag obj
 587          * @param {DragDrop} the target
 588          * @return {boolean} true if the target is a legal target for the
 589          * dd obj
 590          * @static
 591          */
 592         isLegalTarget: function (oDD, oTargetDD) {
 593             var targets = this.getRelated(oDD, true);
 594             for (var i=0, len=targets.length;i<len;++i) {
 595                 if (targets[i].id == oTargetDD.id) {
 596                     return true;
 597                 }
 598             }
 599
 600             return false;
 601         },
 602
 603         /**
 604          * My goal is to be able to transparently determine if an object is
 605          * typeof DragDrop, and the exact subclass of DragDrop.  typeof
 606          * returns "object", oDD.constructor.toString() always returns
 607          * "DragDrop" and not the name of the subclass.  So for now it just
 608          * evaluates a well-known variable in DragDrop.
 609          * @method isTypeOfDD
 610          * @param {Object} the object to evaluate
 611          * @return {boolean} true if typeof oDD = DragDrop
 612          * @static
 613          */
 614         isTypeOfDD: function (oDD) {
 615             return (oDD && oDD.__ygDragDrop);
 616         },
 617
 618         /**
 619          * Utility function to determine if a given element has been
 620          * registered as a drag drop handle for the given Drag Drop object.
 621          * @method isHandle
 622          * @param {String} id the element id to check
 623          * @return {boolean} true if this element is a DragDrop handle, false
 624          * otherwise
 625          * @static
 626          */
 627         isHandle: function(sDDId, sHandleId) {
 628             return ( this.handleIds[sDDId] &&
 629                             this.handleIds[sDDId][sHandleId] );
 630         },
 631
 632         /**
 633          * Returns the DragDrop instance for a given id
 634          * @method getDDById
 635          * @param {String} id the id of the DragDrop object
 636          * @return {DragDrop} the drag drop object, null if it is not found
 637          * @static
 638          */
 639         getDDById: function(id) {
 640             for (var i in this.ids) {
 641                 if (this.ids[i][id]) {
 642                     return this.ids[i][id];
 643                 }
 644             }
 645             return null;
 646         },
 647
 648         /**
 649          * Fired after a registered DragDrop object gets the mousedown event.
 650          * Sets up the events required to track the object being dragged
 651          * @method handleMouseDown
 652          * @param {Event} e the event
 653          * @param oDD the DragDrop object being dragged
 654          * @private
 655          * @static
 656          */
 657         handleMouseDown: function(e, oDD) {
 658             //this._activateShim();
 659
 660             this.currentTarget = YAHOO.util.Event.getTarget(e);
 661
 662             this.dragCurrent = oDD;
 663
 664             var el = oDD.getEl();
 665
 666             // track start position
 667             this.startX = YAHOO.util.Event.getPageX(e);
 668             this.startY = YAHOO.util.Event.getPageY(e);
 669
 670             this.deltaX = this.startX - el.offsetLeft;
 671             this.deltaY = this.startY - el.offsetTop;
 672
 673             this.dragThreshMet = false;
 674
 675             this.clickTimeout = setTimeout(
 676                     function() {
 677                         var DDM = YAHOO.util.DDM;
 678                         DDM.startDrag(DDM.startX, DDM.startY);
 679                         DDM.fromTimeout = true;
 680                     },
 681                     this.clickTimeThresh );
 682         },
 683
 684         /**
 685          * Fired when either the drag pixel threshold or the mousedown hold
 686          * time threshold has been met.
 687          * @method startDrag
 688          * @param x {int} the X position of the original mousedown
 689          * @param y {int} the Y position of the original mousedown
 690          * @static
 691          */
 692         startDrag: function(x, y) {
 693             if (this.dragCurrent && this.dragCurrent.useShim) {
 694                 this._shimState = this.useShim;
 695                 this.useShim = true;
 696             }
 697             this._activateShim();
 698             YAHOO.log("firing drag start events", "info", "DragDropMgr");
 699             clearTimeout(this.clickTimeout);
 700             var dc = this.dragCurrent;
 701             if (dc && dc.events.b4StartDrag) {
 702                 dc.b4StartDrag(x, y);
 703                 dc.fireEvent('b4StartDragEvent', { x: x, y: y });
 704             }
 705             if (dc && dc.events.startDrag) {
 706                 dc.startDrag(x, y);
 707                 dc.fireEvent('startDragEvent', { x: x, y: y });
 708             }
 709             this.dragThreshMet = true;
 710         },
 711
 712         /**
 713          * Internal function to handle the mouseup event.  Will be invoked
 714          * from the context of the document.
 715          * @method handleMouseUp
 716          * @param {Event} e the event
 717          * @private
 718          * @static
 719          */
 720         handleMouseUp: function(e) {
 721             if (this.dragCurrent) {
 722                 clearTimeout(this.clickTimeout);
 723
 724                 if (this.dragThreshMet) {
 725                     YAHOO.log("mouseup detected - completing drag", "info", "DragDropMgr");
 726                     if (this.fromTimeout) {
 727                         YAHOO.log('fromTimeout is true (mouse didn\'t move), call handleMouseMove so we can get the dragOver event', 'info', 'DragDropMgr');
 728                         this.fromTimeout = false;
 729                         this.handleMouseMove(e);
 730                     }
 731                     this.fromTimeout = false;
 732                     this.fireEvents(e, true);
 733                 } else {
 734                     YAHOO.log("drag threshold not met", "info", "DragDropMgr");
 735                 }
 736
 737                 this.stopDrag(e);
 738
 739                 this.stopEvent(e);
 740             }
 741         },
 742
 743         /**
 744          * Utility to stop event propagation and event default, if these
 745          * features are turned on.
 746          * @method stopEvent
 747          * @param {Event} e the event as returned by this.getEvent()
 748          * @static
 749          */
 750         stopEvent: function(e) {
 751             if (this.stopPropagation) {
 752                 YAHOO.util.Event.stopPropagation(e);
 753             }
 754
 755             if (this.preventDefault) {
 756                 YAHOO.util.Event.preventDefault(e);
 757             }
 758         },
 759
 760         /**
 761          * Ends the current drag, cleans up the state, and fires the endDrag
 762          * and mouseUp events.  Called internally when a mouseup is detected
 763          * during the drag.  Can be fired manually during the drag by passing
 764          * either another event (such as the mousemove event received in onDrag)
 765          * or a fake event with pageX and pageY defined (so that endDrag and
 766          * onMouseUp have usable position data.).  Alternatively, pass true
 767          * for the silent parameter so that the endDrag and onMouseUp events
 768          * are skipped (so no event data is needed.)
 769          *
 770          * @method stopDrag
 771          * @param {Event} e the mouseup event, another event (or a fake event)
 772          *                  with pageX and pageY defined, or nothing if the
 773          *                  silent parameter is true
 774          * @param {boolean} silent skips the enddrag and mouseup events if true
 775          * @static
 776          */
 777         stopDrag: function(e, silent) {
 778             // YAHOO.log("mouseup - removing event handlers");
 779             var dc = this.dragCurrent;
 780             // Fire the drag end event for the item that was dragged
 781             if (dc && !silent) {
 782                 if (this.dragThreshMet) {
 783                     YAHOO.log("firing endDrag events", "info", "DragDropMgr");
 784                     if (dc.events.b4EndDrag) {
 785                         dc.b4EndDrag(e);
 786                         dc.fireEvent('b4EndDragEvent', { e: e });
 787                     }
 788                     if (dc.events.endDrag) {
 789                         dc.endDrag(e);
 790                         dc.fireEvent('endDragEvent', { e: e });
 791                     }
 792                 }
 793                 if (dc.events.mouseUp) {
 794                     YAHOO.log("firing dragdrop onMouseUp event", "info", "DragDropMgr");
 795                     dc.onMouseUp(e);
 796                     dc.fireEvent('mouseUpEvent', { e: e });
 797                 }
 798             }
 799
 800             if (this._shimActive) {
 801                 this._deactivateShim();
 802                 if (this.dragCurrent && this.dragCurrent.useShim) {
 803                     this.useShim = this._shimState;
 804                     this._shimState = false;
 805                 }
 806             }
 807
 808             this.dragCurrent = null;
 809             this.dragOvers = {};
 810         },
 811
 812         /**
 813          * Internal function to handle the mousemove event.  Will be invoked
 814          * from the context of the html element.
 815          *
 816          * @TODO figure out what we can do about mouse events lost when the
 817          * user drags objects beyond the window boundary.  Currently we can
 818          * detect this in internet explorer by verifying that the mouse is
 819          * down during the mousemove event.  Firefox doesn't give us the
 820          * button state on the mousemove event.
 821          * @method handleMouseMove
 822          * @param {Event} e the event
 823          * @private
 824          * @static
 825          */
 826         handleMouseMove: function(e) {
 827             //YAHOO.log("handlemousemove");
 828
 829             var dc = this.dragCurrent;
 830             if (dc) {
 831                 // YAHOO.log("no current drag obj");
 832
 833                 // var button = e.which || e.button;
 834                 // YAHOO.log("which: " + e.which + ", button: "+ e.button);
 835
 836                 // check for IE mouseup outside of page boundary
 837                 if (YAHOO.util.Event.isIE && !e.button) {
 838                     YAHOO.log("button failure", "info", "DragDropMgr");
 839                     this.stopEvent(e);
 840                     return this.handleMouseUp(e);
 841                 } else {
 842                     if (e.clientX < 0 || e.clientY < 0) {
 843                         //This will stop the element from leaving the viewport in FF, Opera & Safari
 844                         //Not turned on yet
 845                         //YAHOO.log("Either clientX or clientY is negative, stop the event.", "info", "DragDropMgr");
 846                         //this.stopEvent(e);
 847                         //return false;
 848                     }
 849                 }
 850
 851                 if (!this.dragThreshMet) {
 852                     var diffX = Math.abs(this.startX - YAHOO.util.Event.getPageX(e));
 853                     var diffY = Math.abs(this.startY - YAHOO.util.Event.getPageY(e));
 854                     // YAHOO.log("diffX: " + diffX + "diffY: " + diffY);
 855                     if (diffX > this.clickPixelThresh ||
 856                                 diffY > this.clickPixelThresh) {
 857                         YAHOO.log("pixel threshold met", "info", "DragDropMgr");
 858                         this.startDrag(this.startX, this.startY);
 859                     }
 860                 }
 861
 862                 if (this.dragThreshMet) {
 863                     if (dc && dc.events.b4Drag) {
 864                         dc.b4Drag(e);
 865                         dc.fireEvent('b4DragEvent', { e: e});
 866                     }
 867                     if (dc && dc.events.drag) {
 868                         dc.onDrag(e);
 869                         dc.fireEvent('dragEvent', { e: e});
 870                     }
 871                     if (dc) {
 872                         this.fireEvents(e, false);
 873                     }
 874                 }
 875
 876                 this.stopEvent(e);
 877             }
 878         },
 879
 880         /**
 881          * Iterates over all of the DragDrop elements to find ones we are
 882          * hovering over or dropping on
 883          * @method fireEvents
 884          * @param {Event} e the event
 885          * @param {boolean} isDrop is this a drop op or a mouseover op?
 886          * @private
 887          * @static
 888          */
 889         fireEvents: function(e, isDrop) {
 890             var dc = this.dragCurrent;
 891
 892             // If the user did the mouse up outside of the window, we could
 893             // get here even though we have ended the drag.
 894             // If the config option dragOnly is true, bail out and don't fire the events
 895             if (!dc || dc.isLocked() || dc.dragOnly) {
 896                 return;
 897             }
 898
 899             var x = YAHOO.util.Event.getPageX(e),
 900                 y = YAHOO.util.Event.getPageY(e),
 901                 pt = new YAHOO.util.Point(x,y),
 902                 pos = dc.getTargetCoord(pt.x, pt.y),
 903                 el = dc.getDragEl(),
 904                 events = ['out', 'over', 'drop', 'enter'],
 905                 curRegion = new YAHOO.util.Region( pos.y,
 906                                                pos.x + el.offsetWidth,
 907                                                pos.y + el.offsetHeight,
 908                                                pos.x ),
 909
 910                 oldOvers = [], // cache the previous dragOver array
 911                 inGroupsObj  = {},
 912                 inGroups  = [],
 913                 data = {
 914                     outEvts: [],
 915                     overEvts: [],
 916                     dropEvts: [],
 917                     enterEvts: []
 918                 };
 919
 920
 921             // Check to see if the object(s) we were hovering over is no longer
 922             // being hovered over so we can fire the onDragOut event
 923             for (var i in this.dragOvers) {
 924
 925                 var ddo = this.dragOvers[i];
 926
 927                 if (! this.isTypeOfDD(ddo)) {
 928                     continue;
 929                 }
 930                 if (! this.isOverTarget(pt, ddo, this.mode, curRegion)) {
 931                     data.outEvts.push( ddo );
 932                 }
 933
 934                 oldOvers[i] = true;
 935                 delete this.dragOvers[i];
 936             }
 937
 938             for (var sGroup in dc.groups) {
 939                 // YAHOO.log("Processing group " + sGroup);
 940
 941                 if ("string" != typeof sGroup) {
 942                     continue;
 943                 }
 944
 945                 for (i in this.ids[sGroup]) {
 946                     var oDD = this.ids[sGroup][i];
 947                     if (! this.isTypeOfDD(oDD)) {
 948                         continue;
 949                     }
 950
 951                     if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
 952                         if (this.isOverTarget(pt, oDD, this.mode, curRegion)) {
 953                             inGroupsObj[sGroup] = true;
 954                             // look for drop interactions
 955                             if (isDrop) {
 956                                 data.dropEvts.push( oDD );
 957                             // look for drag enter and drag over interactions
 958                             } else {
 959
 960                                 // initial drag over: dragEnter fires
 961                                 if (!oldOvers[oDD.id]) {
 962                                     data.enterEvts.push( oDD );
 963                                 // subsequent drag overs: dragOver fires
 964                                 } else {
 965                                     data.overEvts.push( oDD );
 966                                 }
 967
 968                                 this.dragOvers[oDD.id] = oDD;
 969                             }
 970                         }
 971                     }
 972                 }
 973             }
 974
 975             this.interactionInfo = {
 976                 out:       data.outEvts,
 977                 enter:     data.enterEvts,
 978                 over:      data.overEvts,
 979                 drop:      data.dropEvts,
 980                 point:     pt,
 981                 draggedRegion:    curRegion,
 982                 sourceRegion: this.locationCache[dc.id],
 983                 validDrop: isDrop
 984             };
 985
 986
 987             for (var inG in inGroupsObj) {
 988                 inGroups.push(inG);
 989             }
 990
 991             // notify about a drop that did not find a target
 992             if (isDrop && !data.dropEvts.length) {
 993                 YAHOO.log(dc.id + " dropped, but not on a target", "info", "DragDropMgr");
 994                 this.interactionInfo.validDrop = false;
 995                 if (dc.events.invalidDrop) {
 996                     dc.onInvalidDrop(e);
 997                     dc.fireEvent('invalidDropEvent', { e: e });
 998                 }
 999             }
1000             for (i = 0; i < events.length; i++) {
1001                 var tmp = null;
1002                 if (data[events[i] + 'Evts']) {
1003                     tmp = data[events[i] + 'Evts'];
1004                 }
1005                 if (tmp && tmp.length) {
1006                     var type = events[i].charAt(0).toUpperCase() + events[i].substr(1),
1007                         ev = 'onDrag' + type,
1008                         b4 = 'b4Drag' + type,
1009                         cev = 'drag' + type + 'Event',
1010                         check = 'drag' + type;
1011                     if (this.mode) {
1012                         YAHOO.log(dc.id + ' ' + ev + ': ' + tmp, "info", "DragDropMgr");
1013                         if (dc.events[b4]) {
1014                             dc[b4](e, tmp, inGroups);
1015                             dc.fireEvent(b4 + 'Event', { event: e, info: tmp, group: inGroups });
1016
1017                         }
1018                         if (dc.events[check]) {
1019                             dc[ev](e, tmp, inGroups);
1020                             dc.fireEvent(cev, { event: e, info: tmp, group: inGroups });
1021                         }
1022                     } else {
1023                         for (var b = 0, len = tmp.length; b < len; ++b) {
1024                             YAHOO.log(dc.id + ' ' + ev + ': ' + tmp[b].id, "info", "DragDropMgr");
1025                             if (dc.events[b4]) {
1026                                 dc[b4](e, tmp[b].id, inGroups[0]);
1027                                 dc.fireEvent(b4 + 'Event', { event: e, info: tmp[b].id, group: inGroups[0] });
1028                             }
1029                             if (dc.events[check]) {
1030                                 dc[ev](e, tmp[b].id, inGroups[0]);
1031                                 dc.fireEvent(cev, { event: e, info: tmp[b].id, group: inGroups[0] });
1032                             }
1033                         }
1034                     }
1035                 }
1036             }
1037         },
1038
1039         /**
1040          * Helper function for getting the best match from the list of drag
1041          * and drop objects returned by the drag and drop events when we are
1042          * in INTERSECT mode.  It returns either the first object that the
1043          * cursor is over, or the object that has the greatest overlap with
1044          * the dragged element.
1045          * @method getBestMatch
1046          * @param  {DragDrop[]} dds The array of drag and drop objects
1047          * targeted
1048          * @return {DragDrop}       The best single match
1049          * @static
1050          */
1051         getBestMatch: function(dds) {
1052             var winner = null;
1053
1054             var len = dds.length;
1055
1056             if (len == 1) {
1057                 winner = dds[0];
1058             } else {
1059                 // Loop through the targeted items
1060                 for (var i=0; i<len; ++i) {
1061                     var dd = dds[i];
1062                     // If the cursor is over the object, it wins.  If the
1063                     // cursor is over multiple matches, the first one we come
1064                     // to wins.
1065                     if (this.mode == this.INTERSECT && dd.cursorIsOver) {
1066                         winner = dd;
1067                         break;
1068                     // Otherwise the object with the most overlap wins
1069                     } else {
1070                         if (!winner || !winner.overlap || (dd.overlap &&
1071                             winner.overlap.getArea() < dd.overlap.getArea())) {
1072                             winner = dd;
1073                         }
1074                     }
1075                 }
1076             }
1077
1078             return winner;
1079         },
1080
1081         /**
1082          * Refreshes the cache of the top-left and bottom-right points of the
1083          * drag and drop objects in the specified group(s).  This is in the
1084          * format that is stored in the drag and drop instance, so typical
1085          * usage is:
1086          * <code>
1087          * YAHOO.util.DragDropMgr.refreshCache(ddinstance.groups);
1088          * </code>
1089          * Alternatively:
1090          * <code>
1091          * YAHOO.util.DragDropMgr.refreshCache({group1:true, group2:true});
1092          * </code>
1093          * @TODO this really should be an indexed array.  Alternatively this
1094          * method could accept both.
1095          * @method refreshCache
1096          * @param {Object} groups an associative array of groups to refresh
1097          * @static
1098          */
1099         refreshCache: function(groups) {
1100             YAHOO.log("refreshing element location cache", "info", "DragDropMgr");
1101
1102             // refresh everything if group array is not provided
1103             var g = groups || this.ids;
1104
1105             for (var sGroup in g) {
1106                 if ("string" != typeof sGroup) {
1107                     continue;
1108                 }
1109                 for (var i in this.ids[sGroup]) {
1110                     var oDD = this.ids[sGroup][i];
1111
1112                     if (this.isTypeOfDD(oDD)) {
1113                         var loc = this.getLocation(oDD);
1114                         if (loc) {
1115                             this.locationCache[oDD.id] = loc;
1116                         } else {
1117                             delete this.locationCache[oDD.id];
1118 YAHOO.log("Could not get the loc for " + oDD.id, "warn", "DragDropMgr");
1119                         }
1120                     }
1121                 }
1122             }
1123         },
1124
1125         /**
1126          * This checks to make sure an element exists and is in the DOM.  The
1127          * main purpose is to handle cases where innerHTML is used to remove
1128          * drag and drop objects from the DOM.  IE provides an 'unspecified
1129          * error' when trying to access the offsetParent of such an element
1130          * @method verifyEl
1131          * @param {HTMLElement} el the element to check
1132          * @return {boolean} true if the element looks usable
1133          * @static
1134          */
1135         verifyEl: function(el) {
1136             try {
1137                 if (el) {
1138                     var parent = el.offsetParent;
1139                     if (parent) {
1140                         return true;
1141                     }
1142                 }
1143             } catch(e) {
1144                 YAHOO.log("detected problem with an element", "info", "DragDropMgr");
1145             }
1146
1147             return false;
1148         },
1149
1150         /**
1151          * Returns a Region object containing the drag and drop element's position
1152          * and size, including the padding configured for it
1153          * @method getLocation
1154          * @param {DragDrop} oDD the drag and drop object to get the
1155          *                       location for
1156          * @return {YAHOO.util.Region} a Region object representing the total area
1157          *                             the element occupies, including any padding
1158          *                             the instance is configured for.
1159          * @static
1160          */
1161         getLocation: function(oDD) {
1162             if (! this.isTypeOfDD(oDD)) {
1163                 YAHOO.log(oDD + " is not a DD obj", "info", "DragDropMgr");
1164                 return null;
1165             }
1166
1167             var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
1168
1169             try {
1170                 pos= YAHOO.util.Dom.getXY(el);
1171             } catch (e) { }
1172
1173             if (!pos) {
1174                 YAHOO.log("getXY failed", "info", "DragDropMgr");
1175                 return null;
1176             }
1177
1178             x1 = pos[0];
1179             x2 = x1 + el.offsetWidth;
1180             y1 = pos[1];
1181             y2 = y1 + el.offsetHeight;
1182
1183             t = y1 - oDD.padding[0];
1184             r = x2 + oDD.padding[1];
1185             b = y2 + oDD.padding[2];
1186             l = x1 - oDD.padding[3];
1187
1188             return new YAHOO.util.Region( t, r, b, l );
1189         },
1190
1191         /**
1192          * Checks the cursor location to see if it over the target
1193          * @method isOverTarget
1194          * @param {YAHOO.util.Point} pt The point to evaluate
1195          * @param {DragDrop} oTarget the DragDrop object we are inspecting
1196          * @param {boolean} intersect true if we are in intersect mode
1197          * @param {YAHOO.util.Region} pre-cached location of the dragged element
1198          * @return {boolean} true if the mouse is over the target
1199          * @private
1200          * @static
1201          */
1202         isOverTarget: function(pt, oTarget, intersect, curRegion) {
1203             // use cache if available
1204             var loc = this.locationCache[oTarget.id];
1205             if (!loc || !this.useCache) {
1206                 YAHOO.log("cache not populated", "info", "DragDropMgr");
1207                 loc = this.getLocation(oTarget);
1208                 this.locationCache[oTarget.id] = loc;
1209
1210                 YAHOO.log("cache: " + loc, "info", "DragDropMgr");
1211             }
1212
1213             if (!loc) {
1214                 YAHOO.log("could not get the location of the element", "info", "DragDropMgr");
1215                 return false;
1216             }
1217
1218             //YAHOO.log("loc: " + loc + ", pt: " + pt);
1219             oTarget.cursorIsOver = loc.contains( pt );
1220
1221             // DragDrop is using this as a sanity check for the initial mousedown
1222             // in this case we are done.  In POINT mode, if the drag obj has no
1223             // contraints, we are done. Otherwise we need to evaluate the
1224             // region the target as occupies to determine if the dragged element
1225             // overlaps with it.
1226
1227             var dc = this.dragCurrent;
1228             if (!dc || (!intersect && !dc.constrainX && !dc.constrainY)) {
1229
1230                 //if (oTarget.cursorIsOver) {
1231                     //YAHOO.log("over " + oTarget + ", " + loc + ", " + pt, "warn");
1232                 //}
1233                 return oTarget.cursorIsOver;
1234             }
1235
1236             oTarget.overlap = null;
1237
1238
1239             // Get the current location of the drag element, this is the
1240             // location of the mouse event less the delta that represents
1241             // where the original mousedown happened on the element.  We
1242             // need to consider constraints and ticks as well.
1243
1244             if (!curRegion) {
1245                 var pos = dc.getTargetCoord(pt.x, pt.y);
1246                 var el = dc.getDragEl();
1247                 curRegion = new YAHOO.util.Region( pos.y,
1248                                                    pos.x + el.offsetWidth,
1249                                                    pos.y + el.offsetHeight,
1250                                                    pos.x );
1251             }
1252
1253             var overlap = curRegion.intersect(loc);
1254
1255             if (overlap) {
1256                 oTarget.overlap = overlap;
1257                 return (intersect) ? true : oTarget.cursorIsOver;
1258             } else {
1259                 return false;
1260             }
1261         },
1262
1263         /**
1264          * unload event handler
1265          * @method _onUnload
1266          * @private
1267          * @static
1268          */
1269         _onUnload: function(e, me) {
1270             this.unregAll();
1271         },
1272
1273         /**
1274          * Cleans up the drag and drop events and objects.
1275          * @method unregAll
1276          * @private
1277          * @static
1278          */
1279         unregAll: function() {
1280             YAHOO.log("unregister all", "info", "DragDropMgr");
1281
1282             if (this.dragCurrent) {
1283                 this.stopDrag();
1284                 this.dragCurrent = null;
1285             }
1286
1287             this._execOnAll("unreg", []);
1288
1289             //for (var i in this.elementCache) {
1290                 //delete this.elementCache[i];
1291             //}
1292             //this.elementCache = {};
1293
1294             this.ids = {};
1295         },
1296
1297         /**
1298          * A cache of DOM elements
1299          * @property elementCache
1300          * @private
1301          * @static
1302          * @deprecated elements are not cached now
1303          */
1304         elementCache: {},
1305
1306         /**
1307          * Get the wrapper for the DOM element specified
1308          * @method getElWrapper
1309          * @param {String} id the id of the element to get
1310          * @return {YAHOO.util.DDM.ElementWrapper} the wrapped element
1311          * @private
1312          * @deprecated This wrapper isn't that useful
1313          * @static
1314          */
1315         getElWrapper: function(id) {
1316             var oWrapper = this.elementCache[id];
1317             if (!oWrapper || !oWrapper.el) {
1318                 oWrapper = this.elementCache[id] =
1319                     new this.ElementWrapper(YAHOO.util.Dom.get(id));
1320             }
1321             return oWrapper;
1322         },
1323
1324         /**
1325          * Returns the actual DOM element
1326          * @method getElement
1327          * @param {String} id the id of the elment to get
1328          * @return {Object} The element
1329          * @deprecated use YAHOO.util.Dom.get instead
1330          * @static
1331          */
1332         getElement: function(id) {
1333             return YAHOO.util.Dom.get(id);
1334         },
1335
1336         /**
1337          * Returns the style property for the DOM element (i.e.,
1338          * document.getElById(id).style)
1339          * @method getCss
1340          * @param {String} id the id of the elment to get
1341          * @return {Object} The style property of the element
1342          * @deprecated use YAHOO.util.Dom instead
1343          * @static
1344          */
1345         getCss: function(id) {
1346             var el = YAHOO.util.Dom.get(id);
1347             return (el) ? el.style : null;
1348         },
1349
1350         /**
1351          * Inner class for cached elements
1352          * @class DragDropMgr.ElementWrapper
1353          * @for DragDropMgr
1354          * @private
1355          * @deprecated
1356          */
1357         ElementWrapper: function(el) {
1358                 /**
1359                  * The element
1360                  * @property el
1361                  */
1362                 this.el = el || null;
1363                 /**
1364                  * The element id
1365                  * @property id
1366                  */
1367                 this.id = this.el && el.id;
1368                 /**
1369                  * A reference to the style property
1370                  * @property css
1371                  */
1372                 this.css = this.el && el.style;
1373             },
1374
1375         /**
1376          * Returns the X position of an html element
1377          * @method getPosX
1378          * @param el the element for which to get the position
1379          * @return {int} the X coordinate
1380          * @for DragDropMgr
1381          * @deprecated use YAHOO.util.Dom.getX instead
1382          * @static
1383          */
1384         getPosX: function(el) {
1385             return YAHOO.util.Dom.getX(el);
1386         },
1387
1388         /**
1389          * Returns the Y position of an html element
1390          * @method getPosY
1391          * @param el the element for which to get the position
1392          * @return {int} the Y coordinate
1393          * @deprecated use YAHOO.util.Dom.getY instead
1394          * @static
1395          */
1396         getPosY: function(el) {
1397             return YAHOO.util.Dom.getY(el);
1398         },
1399
1400         /**
1401          * Swap two nodes.  In IE, we use the native method, for others we
1402          * emulate the IE behavior
1403          * @method swapNode
1404          * @param n1 the first node to swap
1405          * @param n2 the other node to swap
1406          * @static
1407          */
1408         swapNode: function(n1, n2) {
1409             if (n1.swapNode) {
1410                 n1.swapNode(n2);
1411             } else {
1412                 var p = n2.parentNode;
1413                 var s = n2.nextSibling;
1414
1415                 if (s == n1) {
1416                     p.insertBefore(n1, n2);
1417                 } else if (n2 == n1.nextSibling) {
1418                     p.insertBefore(n2, n1);
1419                 } else {
1420                     n1.parentNode.replaceChild(n2, n1);
1421                     p.insertBefore(n1, s);
1422                 }
1423             }
1424         },
1425
1426         /**
1427          * Returns the current scroll position
1428          * @method getScroll
1429          * @private
1430          * @static
1431          */
1432         getScroll: function () {
1433             var t, l, dde=document.documentElement, db=document.body;
1434             if (dde && (dde.scrollTop || dde.scrollLeft)) {
1435                 t = dde.scrollTop;
1436                 l = dde.scrollLeft;
1437             } else if (db) {
1438                 t = db.scrollTop;
1439                 l = db.scrollLeft;
1440             } else {
1441                 YAHOO.log("could not get scroll property", "info", "DragDropMgr");
1442             }
1443             return { top: t, left: l };
1444         },
1445
1446         /**
1447          * Returns the specified element style property
1448          * @method getStyle
1449          * @param {HTMLElement} el          the element
1450          * @param {string}      styleProp   the style property
1451          * @return {string} The value of the style property
1452          * @deprecated use YAHOO.util.Dom.getStyle
1453          * @static
1454          */
1455         getStyle: function(el, styleProp) {
1456             return YAHOO.util.Dom.getStyle(el, styleProp);
1457         },
1458
1459         /**
1460          * Gets the scrollTop
1461          * @method getScrollTop
1462          * @return {int} the document's scrollTop
1463          * @static
1464          */
1465         getScrollTop: function () { return this.getScroll().top; },
1466
1467         /**
1468          * Gets the scrollLeft
1469          * @method getScrollLeft
1470          * @return {int} the document's scrollTop
1471          * @static
1472          */
1473         getScrollLeft: function () { return this.getScroll().left; },
1474
1475         /**
1476          * Sets the x/y position of an element to the location of the
1477          * target element.
1478          * @method moveToEl
1479          * @param {HTMLElement} moveEl      The element to move
1480          * @param {HTMLElement} targetEl    The position reference element
1481          * @static
1482          */
1483         moveToEl: function (moveEl, targetEl) {
1484             var aCoord = YAHOO.util.Dom.getXY(targetEl);
1485             YAHOO.log("moveToEl: " + aCoord, "info", "DragDropMgr");
1486             YAHOO.util.Dom.setXY(moveEl, aCoord);
1487         },
1488
1489         /**
1490          * Gets the client height
1491          * @method getClientHeight
1492          * @return {int} client height in px
1493          * @deprecated use YAHOO.util.Dom.getViewportHeight instead
1494          * @static
1495          */
1496         getClientHeight: function() {
1497             return YAHOO.util.Dom.getViewportHeight();
1498         },
1499
1500         /**
1501          * Gets the client width
1502          * @method getClientWidth
1503          * @return {int} client width in px
1504          * @deprecated use YAHOO.util.Dom.getViewportWidth instead
1505          * @static
1506          */
1507         getClientWidth: function() {
1508             return YAHOO.util.Dom.getViewportWidth();
1509         },
1510
1511         /**
1512          * Numeric array sort function
1513          * @method numericSort
1514          * @static
1515          */
1516         numericSort: function(a, b) { return (a - b); },
1517
1518         /**
1519          * Internal counter
1520          * @property _timeoutCount
1521          * @private
1522          * @static
1523          */
1524         _timeoutCount: 0,
1525
1526         /**
1527          * Trying to make the load order less important.  Without this we get
1528          * an error if this file is loaded before the Event Utility.
1529          * @method _addListeners
1530          * @private
1531          * @static
1532          */
1533         _addListeners: function() {
1534             var DDM = YAHOO.util.DDM;
1535             if ( YAHOO.util.Event && document ) {
1536                 DDM._onLoad();
1537             } else {
1538                 if (DDM._timeoutCount > 2000) {
1539                     YAHOO.log("DragDrop requires the Event Utility", "error", "DragDropMgr");
1540                 } else {
1541                     setTimeout(DDM._addListeners, 10);
1542                     if (document && document.body) {
1543                         DDM._timeoutCount += 1;
1544                     }
1545                 }
1546             }
1547         },
1548
1549         /**
1550          * Recursively searches the immediate parent and all child nodes for
1551          * the handle element in order to determine wheter or not it was
1552          * clicked.
1553          * @method handleWasClicked
1554          * @param node the html element to inspect
1555          * @static
1556          */
1557         handleWasClicked: function(node, id) {
1558             if (this.isHandle(id, node.id)) {
1559                 YAHOO.log("clicked node is a handle", "info", "DragDropMgr");
1560                 return true;
1561             } else {
1562                 // check to see if this is a text node child of the one we want
1563                 var p = node.parentNode;
1564                 // YAHOO.log("p: " + p);
1565
1566                 while (p) {
1567                     if (this.isHandle(id, p.id)) {
1568                         return true;
1569                     } else {
1570                         YAHOO.log(p.id + " is not a handle", "info", "DragDropMgr");
1571                         p = p.parentNode;
1572                     }
1573                 }
1574             }
1575
1576             return false;
1577         }
1578
1579     };
1580
1581 }();
1582
1583 // shorter alias, save a few bytes
1584 YAHOO.util.DDM = YAHOO.util.DragDropMgr;
1585 YAHOO.util.DDM._addListeners();
1586
1587 }
1588
1589 (function() {
1590
1591 var Event=YAHOO.util.Event;
1592 var Dom=YAHOO.util.Dom;
1593
1594 /**
1595  * Defines the interface and base operation of items that that can be
1596  * dragged or can be drop targets.  It was designed to be extended, overriding
1597  * the event handlers for startDrag, onDrag, onDragOver, onDragOut.
1598  * Up to three html elements can be associated with a DragDrop instance:
1599  * <ul>
1600  * <li>linked element: the element that is passed into the constructor.
1601  * This is the element which defines the boundaries for interaction with
1602  * other DragDrop objects.</li>
1603  * <li>handle element(s): The drag operation only occurs if the element that
1604  * was clicked matches a handle element.  By default this is the linked
1605  * element, but there are times that you will want only a portion of the
1606  * linked element to initiate the drag operation, and the setHandleElId()
1607  * method provides a way to define this.</li>
1608  * <li>drag element: this represents an the element that would be moved along
1609  * with the cursor during a drag operation.  By default, this is the linked
1610  * element itself as in {@link YAHOO.util.DD}.  setDragElId() lets you define
1611  * a separate element that would be moved, as in {@link YAHOO.util.DDProxy}
1612  * </li>
1613  * </ul>
1614  * This class should not be instantiated until the onload event to ensure that
1615  * the associated elements are available.
1616  * The following would define a DragDrop obj that would interact with any
1617  * other DragDrop obj in the "group1" group:
1618  * <pre>
1619  *  dd = new YAHOO.util.DragDrop("div1", "group1");
1620  * </pre>
1621  * Since none of the event handlers have been implemented, nothing would
1622  * actually happen if you were to run the code above.  Normally you would
1623  * override this class or one of the default implementations, but you can
1624  * also override the methods you want on an instance of the class...
1625  * <pre>
1626  *  dd.onDragDrop = function(e, id) {
1627  *  &nbsp;&nbsp;alert("dd was dropped on " + id);
1628  *  }
1629  * </pre>
1630  * @namespace YAHOO.util
1631  * @class DragDrop
1632  * @constructor
1633  * @param {String} id of the element that is linked to this instance
1634  * @param {String} sGroup the group of related DragDrop objects
1635  * @param {object} config an object containing configurable attributes
1636  *                Valid properties for DragDrop:
1637  *                    padding, isTarget, maintainOffset, primaryButtonOnly,
1638  */
1639 YAHOO.util.DragDrop = function(id, sGroup, config) {
1640     if (id) {
1641         this.init(id, sGroup, config);
1642     }
1643 };
1644
1645 YAHOO.util.DragDrop.prototype = {
1646     /**
1647      * An Object Literal containing the events that we will be using: mouseDown, b4MouseDown, mouseUp, b4StartDrag, startDrag, b4EndDrag, endDrag, mouseUp, drag, b4Drag, invalidDrop, b4DragOut, dragOut, dragEnter, b4DragOver, dragOver, b4DragDrop, dragDrop
1648      * By setting any of these to false, then event will not be fired.
1649      * @property events
1650      * @type object
1651      */
1652     events: null,
1653     /**
1654     * @method on
1655     * @description Shortcut for EventProvider.subscribe, see <a href="YAHOO.util.EventProvider.html#subscribe">YAHOO.util.EventProvider.subscribe</a>
1656     */
1657     on: function() {
1658         this.subscribe.apply(this, arguments);
1659     },
1660     /**
1661      * The id of the element associated with this object.  This is what we
1662      * refer to as the "linked element" because the size and position of
1663      * this element is used to determine when the drag and drop objects have
1664      * interacted.
1665      * @property id
1666      * @type String
1667      */
1668     id: null,
1669
1670     /**
1671      * Configuration attributes passed into the constructor
1672      * @property config
1673      * @type object
1674      */
1675     config: null,
1676
1677     /**
1678      * The id of the element that will be dragged.  By default this is same
1679      * as the linked element , but could be changed to another element. Ex:
1680      * YAHOO.util.DDProxy
1681      * @property dragElId
1682      * @type String
1683      * @private
1684      */
1685     dragElId: null,
1686
1687     /**
1688      * the id of the element that initiates the drag operation.  By default
1689      * this is the linked element, but could be changed to be a child of this
1690      * element.  This lets us do things like only starting the drag when the
1691      * header element within the linked html element is clicked.
1692      * @property handleElId
1693      * @type String
1694      * @private
1695      */
1696     handleElId: null,
1697
1698     /**
1699      * An associative array of HTML tags that will be ignored if clicked.
1700      * @property invalidHandleTypes
1701      * @type {string: string}
1702      */
1703     invalidHandleTypes: null,
1704
1705     /**
1706      * An associative array of ids for elements that will be ignored if clicked
1707      * @property invalidHandleIds
1708      * @type {string: string}
1709      */
1710     invalidHandleIds: null,
1711
1712     /**
1713      * An indexted array of css class names for elements that will be ignored
1714      * if clicked.
1715      * @property invalidHandleClasses
1716      * @type string[]
1717      */
1718     invalidHandleClasses: null,
1719
1720     /**
1721      * The linked element's absolute X position at the time the drag was
1722      * started
1723      * @property startPageX
1724      * @type int
1725      * @private
1726      */
1727     startPageX: 0,
1728
1729     /**
1730      * The linked element's absolute X position at the time the drag was
1731      * started
1732      * @property startPageY
1733      * @type int
1734      * @private
1735      */
1736     startPageY: 0,
1737
1738     /**
1739      * The group defines a logical collection of DragDrop objects that are
1740      * related.  Instances only get events when interacting with other
1741      * DragDrop object in the same group.  This lets us define multiple
1742      * groups using a single DragDrop subclass if we want.
1743      * @property groups
1744      * @type {string: string}
1745      */
1746     groups: null,
1747
1748     /**
1749      * Individual drag/drop instances can be locked.  This will prevent
1750      * onmousedown start drag.
1751      * @property locked
1752      * @type boolean
1753      * @private
1754      */
1755     locked: false,
1756
1757     /**
1758      * Lock this instance
1759      * @method lock
1760      */
1761     lock: function() { this.locked = true; },
1762
1763     /**
1764      * Unlock this instace
1765      * @method unlock
1766      */
1767     unlock: function() { this.locked = false; },
1768
1769     /**
1770      * By default, all instances can be a drop target.  This can be disabled by
1771      * setting isTarget to false.
1772      * @property isTarget
1773      * @type boolean
1774      */
1775     isTarget: true,
1776
1777     /**
1778      * The padding configured for this drag and drop object for calculating
1779      * the drop zone intersection with this object.
1780      * @property padding
1781      * @type int[]
1782      */
1783     padding: null,
1784     /**
1785      * If this flag is true, do not fire drop events. The element is a drag only element (for movement not dropping)
1786      * @property dragOnly
1787      * @type Boolean
1788      */
1789     dragOnly: false,
1790
1791     /**
1792      * If this flag is true, a shim will be placed over the screen/viewable area to track mouse events. Should help with dragging elements over iframes and other controls.
1793      * @property useShim
1794      * @type Boolean
1795      */
1796     useShim: false,
1797
1798     /**
1799      * Cached reference to the linked element
1800      * @property _domRef
1801      * @private
1802      */
1803     _domRef: null,
1804
1805     /**
1806      * Internal typeof flag
1807      * @property __ygDragDrop
1808      * @private
1809      */
1810     __ygDragDrop: true,
1811
1812     /**
1813      * Set to true when horizontal contraints are applied
1814      * @property constrainX
1815      * @type boolean
1816      * @private
1817      */
1818     constrainX: false,
1819
1820     /**
1821      * Set to true when vertical contraints are applied
1822      * @property constrainY
1823      * @type boolean
1824      * @private
1825      */
1826     constrainY: false,
1827
1828     /**
1829      * The left constraint
1830      * @property minX
1831      * @type int
1832      * @private
1833      */
1834     minX: 0,
1835
1836     /**
1837      * The right constraint
1838      * @property maxX
1839      * @type int
1840      * @private
1841      */
1842     maxX: 0,
1843
1844     /**
1845      * The up constraint
1846      * @property minY
1847      * @type int
1848      * @type int
1849      * @private
1850      */
1851     minY: 0,
1852
1853     /**
1854      * The down constraint
1855      * @property maxY
1856      * @type int
1857      * @private
1858      */
1859     maxY: 0,
1860
1861     /**
1862      * The difference between the click position and the source element's location
1863      * @property deltaX
1864      * @type int
1865      * @private
1866      */
1867     deltaX: 0,
1868
1869     /**
1870      * The difference between the click position and the source element's location
1871      * @property deltaY
1872      * @type int
1873      * @private
1874      */
1875     deltaY: 0,
1876
1877     /**
1878      * Maintain offsets when we resetconstraints.  Set to true when you want
1879      * the position of the element relative to its parent to stay the same
1880      * when the page changes
1881      *
1882      * @property maintainOffset
1883      * @type boolean
1884      */
1885     maintainOffset: false,
1886
1887     /**
1888      * Array of pixel locations the element will snap to if we specified a
1889      * horizontal graduation/interval.  This array is generated automatically
1890      * when you define a tick interval.
1891      * @property xTicks
1892      * @type int[]
1893      */
1894     xTicks: null,
1895
1896     /**
1897      * Array of pixel locations the element will snap to if we specified a
1898      * vertical graduation/interval.  This array is generated automatically
1899      * when you define a tick interval.
1900      * @property yTicks
1901      * @type int[]
1902      */
1903     yTicks: null,
1904
1905     /**
1906      * By default the drag and drop instance will only respond to the primary
1907      * button click (left button for a right-handed mouse).  Set to true to
1908      * allow drag and drop to start with any mouse click that is propogated
1909      * by the browser
1910      * @property primaryButtonOnly
1911      * @type boolean
1912      */
1913     primaryButtonOnly: true,
1914
1915     /**
1916      * The availabe property is false until the linked dom element is accessible.
1917      * @property available
1918      * @type boolean
1919      */
1920     available: false,
1921
1922     /**
1923      * By default, drags can only be initiated if the mousedown occurs in the
1924      * region the linked element is.  This is done in part to work around a
1925      * bug in some browsers that mis-report the mousedown if the previous
1926      * mouseup happened outside of the window.  This property is set to true
1927      * if outer handles are defined.
1928      *
1929      * @property hasOuterHandles
1930      * @type boolean
1931      * @default false
1932      */
1933     hasOuterHandles: false,
1934
1935     /**
1936      * Property that is assigned to a drag and drop object when testing to
1937      * see if it is being targeted by another dd object.  This property
1938      * can be used in intersect mode to help determine the focus of
1939      * the mouse interaction.  DDM.getBestMatch uses this property first to
1940      * determine the closest match in INTERSECT mode when multiple targets
1941      * are part of the same interaction.
1942      * @property cursorIsOver
1943      * @type boolean
1944      */
1945     cursorIsOver: false,
1946
1947     /**
1948      * Property that is assigned to a drag and drop object when testing to
1949      * see if it is being targeted by another dd object.  This is a region
1950      * that represents the area the draggable element overlaps this target.
1951      * DDM.getBestMatch uses this property to compare the size of the overlap
1952      * to that of other targets in order to determine the closest match in
1953      * INTERSECT mode when multiple targets are part of the same interaction.
1954      * @property overlap
1955      * @type YAHOO.util.Region
1956      */
1957     overlap: null,
1958
1959     /**
1960      * Code that executes immediately before the startDrag event
1961      * @method b4StartDrag
1962      * @private
1963      */
1964     b4StartDrag: function(x, y) { },
1965
1966     /**
1967      * Abstract method called after a drag/drop object is clicked
1968      * and the drag or mousedown time thresholds have beeen met.
1969      * @method startDrag
1970      * @param {int} X click location
1971      * @param {int} Y click location
1972      */
1973     startDrag: function(x, y) { /* override this */ },
1974
1975     /**
1976      * Code that executes immediately before the onDrag event
1977      * @method b4Drag
1978      * @private
1979      */
1980     b4Drag: function(e) { },
1981
1982     /**
1983      * Abstract method called during the onMouseMove event while dragging an
1984      * object.
1985      * @method onDrag
1986      * @param {Event} e the mousemove event
1987      */
1988     onDrag: function(e) { /* override this */ },
1989
1990     /**
1991      * Abstract method called when this element fist begins hovering over
1992      * another DragDrop obj
1993      * @method onDragEnter
1994      * @param {Event} e the mousemove event
1995      * @param {String|DragDrop[]} id In POINT mode, the element
1996      * id this is hovering over.  In INTERSECT mode, an array of one or more
1997      * dragdrop items being hovered over.
1998      */
1999     onDragEnter: function(e, id) { /* override this */ },
2000
2001     /**
2002      * Code that executes immediately before the onDragOver event
2003      * @method b4DragOver
2004      * @private
2005      */
2006     b4DragOver: function(e) { },
2007
2008     /**
2009      * Abstract method called when this element is hovering over another
2010      * DragDrop obj
2011      * @method onDragOver
2012      * @param {Event} e the mousemove event
2013      * @param {String|DragDrop[]} id In POINT mode, the element
2014      * id this is hovering over.  In INTERSECT mode, an array of dd items
2015      * being hovered over.
2016      */
2017     onDragOver: function(e, id) { /* override this */ },
2018
2019     /**
2020      * Code that executes immediately before the onDragOut event
2021      * @method b4DragOut
2022      * @private
2023      */
2024     b4DragOut: function(e) { },
2025
2026     /**
2027      * Abstract method called when we are no longer hovering over an element
2028      * @method onDragOut
2029      * @param {Event} e the mousemove event
2030      * @param {String|DragDrop[]} id In POINT mode, the element
2031      * id this was hovering over.  In INTERSECT mode, an array of dd items
2032      * that the mouse is no longer over.
2033      */
2034     onDragOut: function(e, id) { /* override this */ },
2035
2036     /**
2037      * Code that executes immediately before the onDragDrop event
2038      * @method b4DragDrop
2039      * @private
2040      */
2041     b4DragDrop: function(e) { },
2042
2043     /**
2044      * Abstract method called when this item is dropped on another DragDrop
2045      * obj
2046      * @method onDragDrop
2047      * @param {Event} e the mouseup event
2048      * @param {String|DragDrop[]} id In POINT mode, the element
2049      * id this was dropped on.  In INTERSECT mode, an array of dd items this
2050      * was dropped on.
2051      */
2052     onDragDrop: function(e, id) { /* override this */ },
2053
2054     /**
2055      * Abstract method called when this item is dropped on an area with no
2056      * drop target
2057      * @method onInvalidDrop
2058      * @param {Event} e the mouseup event
2059      */
2060     onInvalidDrop: function(e) { /* override this */ },
2061
2062     /**
2063      * Code that executes immediately before the endDrag event
2064      * @method b4EndDrag
2065      * @private
2066      */
2067     b4EndDrag: function(e) { },
2068
2069     /**
2070      * Fired when we are done dragging the object
2071      * @method endDrag
2072      * @param {Event} e the mouseup event
2073      */
2074     endDrag: function(e) { /* override this */ },
2075
2076     /**
2077      * Code executed immediately before the onMouseDown event
2078      * @method b4MouseDown
2079      * @param {Event} e the mousedown event
2080      * @private
2081      */
2082     b4MouseDown: function(e) {  },
2083
2084     /**
2085      * Event handler that fires when a drag/drop obj gets a mousedown
2086      * @method onMouseDown
2087      * @param {Event} e the mousedown event
2088      */
2089     onMouseDown: function(e) { /* override this */ },
2090
2091     /**
2092      * Event handler that fires when a drag/drop obj gets a mouseup
2093      * @method onMouseUp
2094      * @param {Event} e the mouseup event
2095      */
2096     onMouseUp: function(e) { /* override this */ },
2097
2098     /**
2099      * Override the onAvailable method to do what is needed after the initial
2100      * position was determined.
2101      * @method onAvailable
2102      */
2103     onAvailable: function () {
2104         //this.logger.log("onAvailable (base)");
2105     },
2106
2107     /**
2108      * Returns a reference to the linked element
2109      * @method getEl
2110      * @return {HTMLElement} the html element
2111      */
2112     getEl: function() {
2113         if (!this._domRef) {
2114             this._domRef = Dom.get(this.id);
2115         }
2116
2117         return this._domRef;
2118     },
2119
2120     /**
2121      * Returns a reference to the actual element to drag.  By default this is
2122      * the same as the html element, but it can be assigned to another
2123      * element. An example of this can be found in YAHOO.util.DDProxy
2124      * @method getDragEl
2125      * @return {HTMLElement} the html element
2126      */
2127     getDragEl: function() {
2128         return Dom.get(this.dragElId);
2129     },
2130
2131     /**
2132      * Sets up the DragDrop object.  Must be called in the constructor of any
2133      * YAHOO.util.DragDrop subclass
2134      * @method init
2135      * @param id the id of the linked element
2136      * @param {String} sGroup the group of related items
2137      * @param {object} config configuration attributes
2138      */
2139     init: function(id, sGroup, config) {
2140         this.initTarget(id, sGroup, config);
2141         Event.on(this._domRef || this.id, "mousedown",
2142                         this.handleMouseDown, this, true);
2143
2144         // Event.on(this.id, "selectstart", Event.preventDefault);
2145         for (var i in this.events) {
2146             this.createEvent(i + 'Event');
2147         }
2148
2149     },
2150
2151     /**
2152      * Initializes Targeting functionality only... the object does not
2153      * get a mousedown handler.
2154      * @method initTarget
2155      * @param id the id of the linked element
2156      * @param {String} sGroup the group of related items
2157      * @param {object} config configuration attributes
2158      */
2159     initTarget: function(id, sGroup, config) {
2160
2161         // configuration attributes
2162         this.config = config || {};
2163
2164         this.events = {};
2165
2166         // create a local reference to the drag and drop manager
2167         this.DDM = YAHOO.util.DDM;
2168
2169         // initialize the groups object
2170         this.groups = {};
2171
2172         // assume that we have an element reference instead of an id if the
2173         // parameter is not a string
2174         if (typeof id !== "string") {
2175             YAHOO.log("id is not a string, assuming it is an HTMLElement");
2176             this._domRef = id;
2177             id = Dom.generateId(id);
2178         }
2179
2180         // set the id
2181         this.id = id;
2182
2183         // add to an interaction group
2184         this.addToGroup((sGroup) ? sGroup : "default");
2185
2186         // We don't want to register this as the handle with the manager
2187         // so we just set the id rather than calling the setter.
2188         this.handleElId = id;
2189
2190         Event.onAvailable(id, this.handleOnAvailable, this, true);
2191
2192         // create a logger instance
2193         this.logger = (YAHOO.widget.LogWriter) ?
2194                 new YAHOO.widget.LogWriter(this.toString()) : YAHOO;
2195
2196         // the linked element is the element that gets dragged by default
2197         this.setDragElId(id);
2198
2199         // by default, clicked anchors will not start drag operations.
2200         // @TODO what else should be here?  Probably form fields.
2201         this.invalidHandleTypes = { A: "A" };
2202         this.invalidHandleIds = {};
2203         this.invalidHandleClasses = [];
2204
2205         this.applyConfig();
2206     },
2207
2208     /**
2209      * Applies the configuration parameters that were passed into the constructor.
2210      * This is supposed to happen at each level through the inheritance chain.  So
2211      * a DDProxy implentation will execute apply config on DDProxy, DD, and
2212      * DragDrop in order to get all of the parameters that are available in
2213      * each object.
2214      * @method applyConfig
2215      */
2216     applyConfig: function() {
2217         this.events = {
2218             mouseDown: true,
2219             b4MouseDown: true,
2220             mouseUp: true,
2221             b4StartDrag: true,
2222             startDrag: true,
2223             b4EndDrag: true,
2224             endDrag: true,
2225             drag: true,
2226             b4Drag: true,
2227             invalidDrop: true,
2228             b4DragOut: true,
2229             dragOut: true,
2230             dragEnter: true,
2231             b4DragOver: true,
2232             dragOver: true,
2233             b4DragDrop: true,
2234             dragDrop: true
2235         };
2236
2237         if (this.config.events) {
2238             for (var i in this.config.events) {
2239                 if (this.config.events[i] === false) {
2240                     this.events[i] = false;
2241                 }
2242             }
2243         }
2244
2245
2246         // configurable properties:
2247         //    padding, isTarget, maintainOffset, primaryButtonOnly
2248         this.padding           = this.config.padding || [0, 0, 0, 0];
2249         this.isTarget          = (this.config.isTarget !== false);
2250         this.maintainOffset    = (this.config.maintainOffset);
2251         this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
2252         this.dragOnly = ((this.config.dragOnly === true) ? true : false);
2253         this.useShim = ((this.config.useShim === true) ? true : false);
2254     },
2255
2256     /**
2257      * Executed when the linked element is available
2258      * @method handleOnAvailable
2259      * @private
2260      */
2261     handleOnAvailable: function() {
2262         //this.logger.log("handleOnAvailable");
2263         this.available = true;
2264         this.resetConstraints();
2265         this.onAvailable();
2266     },
2267
2268      /**
2269      * Configures the padding for the target zone in px.  Effectively expands
2270      * (or reduces) the virtual object size for targeting calculations.
2271      * Supports css-style shorthand; if only one parameter is passed, all sides
2272      * will have that padding, and if only two are passed, the top and bottom
2273      * will have the first param, the left and right the second.
2274      * @method setPadding
2275      * @param {int} iTop    Top pad
2276      * @param {int} iRight  Right pad
2277      * @param {int} iBot    Bot pad
2278      * @param {int} iLeft   Left pad
2279      */
2280     setPadding: function(iTop, iRight, iBot, iLeft) {
2281         // this.padding = [iLeft, iRight, iTop, iBot];
2282         if (!iRight && 0 !== iRight) {
2283             this.padding = [iTop, iTop, iTop, iTop];
2284         } else if (!iBot && 0 !== iBot) {
2285             this.padding = [iTop, iRight, iTop, iRight];
2286         } else {
2287             this.padding = [iTop, iRight, iBot, iLeft];
2288         }
2289     },
2290
2291     /**
2292      * Stores the initial placement of the linked element.
2293      * @method setInitialPosition
2294      * @param {int} diffX   the X offset, default 0
2295      * @param {int} diffY   the Y offset, default 0
2296      * @private
2297      */
2298     setInitPosition: function(diffX, diffY) {
2299         var el = this.getEl();
2300
2301         if (!this.DDM.verifyEl(el)) {
2302             if (el && el.style && (el.style.display == 'none')) {
2303                 this.logger.log(this.id + " can not get initial position, element style is display: none");
2304             } else {
2305                 this.logger.log(this.id + " element is broken");
2306             }
2307             return;
2308         }
2309
2310         var dx = diffX || 0;
2311         var dy = diffY || 0;
2312
2313         var p = Dom.getXY( el );
2314
2315         this.initPageX = p[0] - dx;
2316         this.initPageY = p[1] - dy;
2317
2318         this.lastPageX = p[0];
2319         this.lastPageY = p[1];
2320
2321         this.logger.log(this.id + " initial position: " + this.initPageX +
2322                 ", " + this.initPageY);
2323
2324
2325         this.setStartPosition(p);
2326     },
2327
2328     /**
2329      * Sets the start position of the element.  This is set when the obj
2330      * is initialized, the reset when a drag is started.
2331      * @method setStartPosition
2332      * @param pos current position (from previous lookup)
2333      * @private
2334      */
2335     setStartPosition: function(pos) {
2336         var p = pos || Dom.getXY(this.getEl());
2337
2338         this.deltaSetXY = null;
2339
2340         this.startPageX = p[0];
2341         this.startPageY = p[1];
2342     },
2343
2344     /**
2345      * Add this instance to a group of related drag/drop objects.  All
2346      * instances belong to at least one group, and can belong to as many
2347      * groups as needed.
2348      * @method addToGroup
2349      * @param sGroup {string} the name of the group
2350      */
2351     addToGroup: function(sGroup) {
2352         this.groups[sGroup] = true;
2353         this.DDM.regDragDrop(this, sGroup);
2354     },
2355
2356     /**
2357      * Remove's this instance from the supplied interaction group
2358      * @method removeFromGroup
2359      * @param {string}  sGroup  The group to drop
2360      */
2361     removeFromGroup: function(sGroup) {
2362         this.logger.log("Removing from group: " + sGroup);
2363         if (this.groups[sGroup]) {
2364             delete this.groups[sGroup];
2365         }
2366
2367         this.DDM.removeDDFromGroup(this, sGroup);
2368     },
2369
2370     /**
2371      * Allows you to specify that an element other than the linked element
2372      * will be moved with the cursor during a drag
2373      * @method setDragElId
2374      * @param id {string} the id of the element that will be used to initiate the drag
2375      */
2376     setDragElId: function(id) {
2377         this.dragElId = id;
2378     },
2379
2380     /**
2381      * Allows you to specify a child of the linked element that should be
2382      * used to initiate the drag operation.  An example of this would be if
2383      * you have a content div with text and links.  Clicking anywhere in the
2384      * content area would normally start the drag operation.  Use this method
2385      * to specify that an element inside of the content div is the element
2386      * that starts the drag operation.
2387      * @method setHandleElId
2388      * @param id {string} the id of the element that will be used to
2389      * initiate the drag.
2390      */
2391     setHandleElId: function(id) {
2392         if (typeof id !== "string") {
2393             YAHOO.log("id is not a string, assuming it is an HTMLElement");
2394             id = Dom.generateId(id);
2395         }
2396         this.handleElId = id;
2397         this.DDM.regHandle(this.id, id);
2398     },
2399
2400     /**
2401      * Allows you to set an element outside of the linked element as a drag
2402      * handle
2403      * @method setOuterHandleElId
2404      * @param id the id of the element that will be used to initiate the drag
2405      */
2406     setOuterHandleElId: function(id) {
2407         if (typeof id !== "string") {
2408             YAHOO.log("id is not a string, assuming it is an HTMLElement");
2409             id = Dom.generateId(id);
2410         }
2411         this.logger.log("Adding outer handle event: " + id);
2412         Event.on(id, "mousedown",
2413                 this.handleMouseDown, this, true);
2414         this.setHandleElId(id);
2415
2416         this.hasOuterHandles = true;
2417     },
2418
2419     /**
2420      * Remove all drag and drop hooks for this element
2421      * @method unreg
2422      */
2423     unreg: function() {
2424         this.logger.log("DragDrop obj cleanup " + this.id);
2425         Event.removeListener(this.id, "mousedown",
2426                 this.handleMouseDown);
2427         this._domRef = null;
2428         this.DDM._remove(this);
2429     },
2430
2431     /**
2432      * Returns true if this instance is locked, or the drag drop mgr is locked
2433      * (meaning that all drag/drop is disabled on the page.)
2434      * @method isLocked
2435      * @return {boolean} true if this obj or all drag/drop is locked, else
2436      * false
2437      */
2438     isLocked: function() {
2439         return (this.DDM.isLocked() || this.locked);
2440     },
2441
2442     /**
2443      * Fired when this object is clicked
2444      * @method handleMouseDown
2445      * @param {Event} e
2446      * @param {YAHOO.util.DragDrop} oDD the clicked dd object (this dd obj)
2447      * @private
2448      */
2449     handleMouseDown: function(e, oDD) {
2450
2451         var button = e.which || e.button;
2452         this.logger.log("button: " + button);
2453
2454         if (this.primaryButtonOnly && button > 1) {
2455             this.logger.log("Mousedown was not produced by the primary button");
2456             return;
2457         }
2458
2459         if (this.isLocked()) {
2460             this.logger.log("Drag and drop is disabled, aborting");
2461             return;
2462         }
2463
2464         this.logger.log("mousedown " + this.id);
2465
2466         this.logger.log("firing onMouseDown events");
2467
2468         // firing the mousedown events prior to calculating positions
2469         var b4Return = this.b4MouseDown(e),
2470         b4Return2 = true;
2471
2472         if (this.events.b4MouseDown) {
2473             b4Return2 = this.fireEvent('b4MouseDownEvent', e);
2474         }
2475         var mDownReturn = this.onMouseDown(e),
2476             mDownReturn2 = true;
2477         if (this.events.mouseDown) {
2478             mDownReturn2 = this.fireEvent('mouseDownEvent', e);
2479         }
2480
2481         if ((b4Return === false) || (mDownReturn === false) || (b4Return2 === false) || (mDownReturn2 === false)) {
2482             this.logger.log('b4MouseDown or onMouseDown returned false, exiting drag');
2483             return;
2484         }
2485
2486         this.DDM.refreshCache(this.groups);
2487         // var self = this;
2488         // setTimeout( function() { self.DDM.refreshCache(self.groups); }, 0);
2489
2490         // Only process the event if we really clicked within the linked
2491         // element.  The reason we make this check is that in the case that
2492         // another element was moved between the clicked element and the
2493         // cursor in the time between the mousedown and mouseup events. When
2494         // this happens, the element gets the next mousedown event
2495         // regardless of where on the screen it happened.
2496         var pt = new YAHOO.util.Point(Event.getPageX(e), Event.getPageY(e));
2497         if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
2498                 this.logger.log("Click was not over the element: " + this.id);
2499         } else {
2500             if (this.clickValidator(e)) {
2501
2502                 this.logger.log("click was a valid handle");
2503
2504                 // set the initial element position
2505                 this.setStartPosition();
2506
2507                 // start tracking mousemove distance and mousedown time to
2508                 // determine when to start the actual drag
2509                 this.DDM.handleMouseDown(e, this);
2510
2511                 // this mousedown is mine
2512                 this.DDM.stopEvent(e);
2513             } else {
2514
2515 this.logger.log("clickValidator returned false, drag not initiated");
2516
2517             }
2518         }
2519     },
2520
2521     /**
2522      * @method clickValidator
2523      * @description Method validates that the clicked element
2524      * was indeed the handle or a valid child of the handle
2525      * @param {Event} e
2526      */
2527     clickValidator: function(e) {
2528         var target = YAHOO.util.Event.getTarget(e);
2529         return ( this.isValidHandleChild(target) &&
2530                     (this.id == this.handleElId ||
2531                         this.DDM.handleWasClicked(target, this.id)) );
2532     },
2533
2534     /**
2535      * Finds the location the element should be placed if we want to move
2536      * it to where the mouse location less the click offset would place us.
2537      * @method getTargetCoord
2538      * @param {int} iPageX the X coordinate of the click
2539      * @param {int} iPageY the Y coordinate of the click
2540      * @return an object that contains the coordinates (Object.x and Object.y)
2541      * @private
2542      */
2543     getTargetCoord: function(iPageX, iPageY) {
2544
2545         // this.logger.log("getTargetCoord: " + iPageX + ", " + iPageY);
2546
2547         var x = iPageX - this.deltaX;
2548         var y = iPageY - this.deltaY;
2549
2550         if (this.constrainX) {
2551             if (x < this.minX) { x = this.minX; }
2552             if (x > this.maxX) { x = this.maxX; }
2553         }
2554
2555         if (this.constrainY) {
2556             if (y < this.minY) { y = this.minY; }
2557             if (y > this.maxY) { y = this.maxY; }
2558         }
2559
2560         x = this.getTick(x, this.xTicks);
2561         y = this.getTick(y, this.yTicks);
2562
2563         // this.logger.log("getTargetCoord " +
2564                 // " iPageX: " + iPageX +
2565                 // " iPageY: " + iPageY +
2566                 // " x: " + x + ", y: " + y);
2567
2568         return {x:x, y:y};
2569     },
2570
2571     /**
2572      * Allows you to specify a tag name that should not start a drag operation
2573      * when clicked.  This is designed to facilitate embedding links within a
2574      * drag handle that do something other than start the drag.
2575      * @method addInvalidHandleType
2576      * @param {string} tagName the type of element to exclude
2577      */
2578     addInvalidHandleType: function(tagName) {
2579         var type = tagName.toUpperCase();
2580         this.invalidHandleTypes[type] = type;
2581     },
2582
2583     /**
2584      * Lets you to specify an element id for a child of a drag handle
2585      * that should not initiate a drag
2586      * @method addInvalidHandleId
2587      * @param {string} id the element id of the element you wish to ignore
2588      */
2589     addInvalidHandleId: function(id) {
2590         if (typeof id !== "string") {
2591             YAHOO.log("id is not a string, assuming it is an HTMLElement");
2592             id = Dom.generateId(id);
2593         }
2594         this.invalidHandleIds[id] = id;
2595     },
2596
2597
2598     /**
2599      * Lets you specify a css class of elements that will not initiate a drag
2600      * @method addInvalidHandleClass
2601      * @param {string} cssClass the class of the elements you wish to ignore
2602      */
2603     addInvalidHandleClass: function(cssClass) {
2604         this.invalidHandleClasses.push(cssClass);
2605     },
2606
2607     /**
2608      * Unsets an excluded tag name set by addInvalidHandleType
2609      * @method removeInvalidHandleType
2610      * @param {string} tagName the type of element to unexclude
2611      */
2612     removeInvalidHandleType: function(tagName) {
2613         var type = tagName.toUpperCase();
2614         // this.invalidHandleTypes[type] = null;
2615         delete this.invalidHandleTypes[type];
2616     },
2617
2618     /**
2619      * Unsets an invalid handle id
2620      * @method removeInvalidHandleId
2621      * @param {string} id the id of the element to re-enable
2622      */
2623     removeInvalidHandleId: function(id) {
2624         if (typeof id !== "string") {
2625             YAHOO.log("id is not a string, assuming it is an HTMLElement");
2626             id = Dom.generateId(id);
2627         }
2628         delete this.invalidHandleIds[id];
2629     },
2630
2631     /**
2632      * Unsets an invalid css class
2633      * @method removeInvalidHandleClass
2634      * @param {string} cssClass the class of the element(s) you wish to
2635      * re-enable
2636      */
2637     removeInvalidHandleClass: function(cssClass) {
2638         for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
2639             if (this.invalidHandleClasses[i] == cssClass) {
2640                 delete this.invalidHandleClasses[i];
2641             }
2642         }
2643     },
2644
2645     /**
2646      * Checks the tag exclusion list to see if this click should be ignored
2647      * @method isValidHandleChild
2648      * @param {HTMLElement} node the HTMLElement to evaluate
2649      * @return {boolean} true if this is a valid tag type, false if not
2650      */
2651     isValidHandleChild: function(node) {
2652
2653         var valid = true;
2654         // var n = (node.nodeName == "#text") ? node.parentNode : node;
2655         var nodeName;
2656         try {
2657             nodeName = node.nodeName.toUpperCase();
2658         } catch(e) {
2659             nodeName = node.nodeName;
2660         }
2661         valid = valid && !this.invalidHandleTypes[nodeName];
2662         valid = valid && !this.invalidHandleIds[node.id];
2663
2664         for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
2665             valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
2666         }
2667
2668         this.logger.log("Valid handle? ... " + valid);
2669
2670         return valid;
2671
2672     },
2673
2674     /**
2675      * Create the array of horizontal tick marks if an interval was specified
2676      * in setXConstraint().
2677      * @method setXTicks
2678      * @private
2679      */
2680     setXTicks: function(iStartX, iTickSize) {
2681         this.xTicks = [];
2682         this.xTickSize = iTickSize;
2683
2684         var tickMap = {};
2685
2686         for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
2687             if (!tickMap[i]) {
2688                 this.xTicks[this.xTicks.length] = i;
2689                 tickMap[i] = true;
2690             }
2691         }
2692
2693         for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
2694             if (!tickMap[i]) {
2695                 this.xTicks[this.xTicks.length] = i;
2696                 tickMap[i] = true;
2697             }
2698         }
2699
2700         this.xTicks.sort(this.DDM.numericSort) ;
2701         this.logger.log("xTicks: " + this.xTicks.join());
2702     },
2703
2704     /**
2705      * Create the array of vertical tick marks if an interval was specified in
2706      * setYConstraint().
2707      * @method setYTicks
2708      * @private
2709      */
2710     setYTicks: function(iStartY, iTickSize) {
2711         // this.logger.log("setYTicks: " + iStartY + ", " + iTickSize
2712                // + ", " + this.initPageY + ", " + this.minY + ", " + this.maxY );
2713         this.yTicks = [];
2714         this.yTickSize = iTickSize;
2715
2716         var tickMap = {};
2717
2718         for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
2719             if (!tickMap[i]) {
2720                 this.yTicks[this.yTicks.length] = i;
2721                 tickMap[i] = true;
2722             }
2723         }
2724
2725         for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
2726             if (!tickMap[i]) {
2727                 this.yTicks[this.yTicks.length] = i;
2728                 tickMap[i] = true;
2729             }
2730         }
2731
2732         this.yTicks.sort(this.DDM.numericSort) ;
2733         this.logger.log("yTicks: " + this.yTicks.join());
2734     },
2735
2736     /**
2737      * By default, the element can be dragged any place on the screen.  Use
2738      * this method to limit the horizontal travel of the element.  Pass in
2739      * 0,0 for the parameters if you want to lock the drag to the y axis.
2740      * @method setXConstraint
2741      * @param {int} iLeft the number of pixels the element can move to the left
2742      * @param {int} iRight the number of pixels the element can move to the
2743      * right
2744      * @param {int} iTickSize optional parameter for specifying that the
2745      * element
2746      * should move iTickSize pixels at a time.
2747      */
2748     setXConstraint: function(iLeft, iRight, iTickSize) {
2749         this.leftConstraint = parseInt(iLeft, 10);
2750         this.rightConstraint = parseInt(iRight, 10);
2751
2752         this.minX = this.initPageX - this.leftConstraint;
2753         this.maxX = this.initPageX + this.rightConstraint;
2754         if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
2755
2756         this.constrainX = true;
2757         this.logger.log("initPageX:" + this.initPageX + " minX:" + this.minX +
2758                 " maxX:" + this.maxX);
2759     },
2760
2761     /**
2762      * Clears any constraints applied to this instance.  Also clears ticks
2763      * since they can't exist independent of a constraint at this time.
2764      * @method clearConstraints
2765      */
2766     clearConstraints: function() {
2767         this.logger.log("Clearing constraints");
2768         this.constrainX = false;
2769         this.constrainY = false;
2770         this.clearTicks();
2771     },
2772
2773     /**
2774      * Clears any tick interval defined for this instance
2775      * @method clearTicks
2776      */
2777     clearTicks: function() {
2778         this.logger.log("Clearing ticks");
2779         this.xTicks = null;
2780         this.yTicks = null;
2781         this.xTickSize = 0;
2782         this.yTickSize = 0;
2783     },
2784
2785     /**
2786      * By default, the element can be dragged any place on the screen.  Set
2787      * this to limit the vertical travel of the element.  Pass in 0,0 for the
2788      * parameters if you want to lock the drag to the x axis.
2789      * @method setYConstraint
2790      * @param {int} iUp the number of pixels the element can move up
2791      * @param {int} iDown the number of pixels the element can move down
2792      * @param {int} iTickSize optional parameter for specifying that the
2793      * element should move iTickSize pixels at a time.
2794      */
2795     setYConstraint: function(iUp, iDown, iTickSize) {
2796         this.logger.log("setYConstraint: " + iUp + "," + iDown + "," + iTickSize);
2797         this.topConstraint = parseInt(iUp, 10);
2798         this.bottomConstraint = parseInt(iDown, 10);
2799
2800         this.minY = this.initPageY - this.topConstraint;
2801         this.maxY = this.initPageY + this.bottomConstraint;
2802         if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
2803
2804         this.constrainY = true;
2805
2806         this.logger.log("initPageY:" + this.initPageY + " minY:" + this.minY +
2807                 " maxY:" + this.maxY);
2808     },
2809
2810     /**
2811      * resetConstraints must be called if you manually reposition a dd element.
2812      * @method resetConstraints
2813      */
2814     resetConstraints: function() {
2815
2816         //this.logger.log("resetConstraints");
2817
2818         // Maintain offsets if necessary
2819         if (this.initPageX || this.initPageX === 0) {
2820             //this.logger.log("init pagexy: " + this.initPageX + ", " +
2821                                //this.initPageY);
2822             //this.logger.log("last pagexy: " + this.lastPageX + ", " +
2823                                //this.lastPageY);
2824             // figure out how much this thing has moved
2825             var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
2826             var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
2827
2828             this.setInitPosition(dx, dy);
2829
2830         // This is the first time we have detected the element's position
2831         } else {
2832             this.setInitPosition();
2833         }
2834
2835         if (this.constrainX) {
2836             this.setXConstraint( this.leftConstraint,
2837                                  this.rightConstraint,
2838                                  this.xTickSize        );
2839         }
2840
2841         if (this.constrainY) {
2842             this.setYConstraint( this.topConstraint,
2843                                  this.bottomConstraint,
2844                                  this.yTickSize         );
2845         }
2846     },
2847
2848     /**
2849      * Normally the drag element is moved pixel by pixel, but we can specify
2850      * that it move a number of pixels at a time.  This method resolves the
2851      * location when we have it set up like this.
2852      * @method getTick
2853      * @param {int} val where we want to place the object
2854      * @param {int[]} tickArray sorted array of valid points
2855      * @return {int} the closest tick
2856      * @private
2857      */
2858     getTick: function(val, tickArray) {
2859
2860         if (!tickArray) {
2861             // If tick interval is not defined, it is effectively 1 pixel,
2862             // so we return the value passed to us.
2863             return val;
2864         } else if (tickArray[0] >= val) {
2865             // The value is lower than the first tick, so we return the first
2866             // tick.
2867             return tickArray[0];
2868         } else {
2869             for (var i=0, len=tickArray.length; i<len; ++i) {
2870                 var next = i + 1;
2871                 if (tickArray[next] && tickArray[next] >= val) {
2872                     var diff1 = val - tickArray[i];
2873                     var diff2 = tickArray[next] - val;
2874                     return (diff2 > diff1) ? tickArray[i] : tickArray[next];
2875                 }
2876             }
2877
2878             // The value is larger than the last tick, so we return the last
2879             // tick.
2880             return tickArray[tickArray.length - 1];
2881         }
2882     },
2883
2884     /**
2885      * toString method
2886      * @method toString
2887      * @return {string} string representation of the dd obj
2888      */
2889     toString: function() {
2890         return ("DragDrop " + this.id);
2891     }
2892
2893 };
2894 YAHOO.augment(YAHOO.util.DragDrop, YAHOO.util.EventProvider);
2895
2896 /**
2897 * @event mouseDownEvent
2898 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
2899 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2900 */
2901
2902 /**
2903 * @event b4MouseDownEvent
2904 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
2905 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2906 */
2907
2908 /**
2909 * @event mouseUpEvent
2910 * @description Fired from inside DragDropMgr when the drag operation is finished.
2911 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2912 */
2913
2914 /**
2915 * @event b4StartDragEvent
2916 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
2917 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2918 */
2919
2920 /**
2921 * @event startDragEvent
2922 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
2923 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2924 */
2925
2926 /**
2927 * @event b4EndDragEvent
2928 * @description Fires before the endDragEvent. Returning false will cancel.
2929 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2930 */
2931
2932 /**
2933 * @event endDragEvent
2934 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
2935 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2936 */
2937
2938 /**
2939 * @event dragEvent
2940 * @description Occurs every mousemove event while dragging.
2941 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2942 */
2943 /**
2944 * @event b4DragEvent
2945 * @description Fires before the dragEvent.
2946 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2947 */
2948 /**
2949 * @event invalidDropEvent
2950 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
2951 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2952 */
2953 /**
2954 * @event b4DragOutEvent
2955 * @description Fires before the dragOutEvent
2956 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2957 */
2958 /**
2959 * @event dragOutEvent
2960 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
2961 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2962 */
2963 /**
2964 * @event dragEnterEvent
2965 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
2966 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2967 */
2968 /**
2969 * @event b4DragOverEvent
2970 * @description Fires before the dragOverEvent.
2971 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2972 */
2973 /**
2974 * @event dragOverEvent
2975 * @description Fires every mousemove event while over a drag and drop object.
2976 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2977 */
2978 /**
2979 * @event b4DragDropEvent
2980 * @description Fires before the dragDropEvent
2981 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2982 */
2983 /**
2984 * @event dragDropEvent
2985 * @description Fires when the dragged objects is dropped on another.
2986 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2987 */
2988 })();
2989 /**
2990  * A DragDrop implementation where the linked element follows the
2991  * mouse cursor during a drag.
2992  * @class DD
2993  * @extends YAHOO.util.DragDrop
2994  * @constructor
2995  * @param {String} id the id of the linked element
2996  * @param {String} sGroup the group of related DragDrop items
2997  * @param {object} config an object containing configurable attributes
2998  *                Valid properties for DD:
2999  *                    scroll
3000  */
3001 YAHOO.util.DD = function(id, sGroup, config) {
3002     if (id) {
3003         this.init(id, sGroup, config);
3004     }
3005 };
3006
3007 YAHOO.extend(YAHOO.util.DD, YAHOO.util.DragDrop, {
3008
3009     /**
3010      * When set to true, the utility automatically tries to scroll the browser
3011      * window when a drag and drop element is dragged near the viewport boundary.
3012      * Defaults to true.
3013      * @property scroll
3014      * @type boolean
3015      */
3016     scroll: true,
3017
3018     /**
3019      * Sets the pointer offset to the distance between the linked element's top
3020      * left corner and the location the element was clicked
3021      * @method autoOffset
3022      * @param {int} iPageX the X coordinate of the click
3023      * @param {int} iPageY the Y coordinate of the click
3024      */
3025     autoOffset: function(iPageX, iPageY) {
3026         var x = iPageX - this.startPageX;
3027         var y = iPageY - this.startPageY;
3028         this.setDelta(x, y);
3029         // this.logger.log("autoOffset el pos: " + aCoord + ", delta: " + x + "," + y);
3030     },
3031
3032     /**
3033      * Sets the pointer offset.  You can call this directly to force the
3034      * offset to be in a particular location (e.g., pass in 0,0 to set it
3035      * to the center of the object, as done in YAHOO.widget.Slider)
3036      * @method setDelta
3037      * @param {int} iDeltaX the distance from the left
3038      * @param {int} iDeltaY the distance from the top
3039      */
3040     setDelta: function(iDeltaX, iDeltaY) {
3041         this.deltaX = iDeltaX;
3042         this.deltaY = iDeltaY;
3043         this.logger.log("deltaX:" + this.deltaX + ", deltaY:" + this.deltaY);
3044     },
3045
3046     /**
3047      * Sets the drag element to the location of the mousedown or click event,
3048      * maintaining the cursor location relative to the location on the element
3049      * that was clicked.  Override this if you want to place the element in a
3050      * location other than where the cursor is.
3051      * @method setDragElPos
3052      * @param {int} iPageX the X coordinate of the mousedown or drag event
3053      * @param {int} iPageY the Y coordinate of the mousedown or drag event
3054      */
3055     setDragElPos: function(iPageX, iPageY) {
3056         // the first time we do this, we are going to check to make sure
3057         // the element has css positioning
3058
3059         var el = this.getDragEl();
3060         this.alignElWithMouse(el, iPageX, iPageY);
3061     },
3062
3063     /**
3064      * Sets the element to the location of the mousedown or click event,
3065      * maintaining the cursor location relative to the location on the element
3066      * that was clicked.  Override this if you want to place the element in a
3067      * location other than where the cursor is.
3068      * @method alignElWithMouse
3069      * @param {HTMLElement} el the element to move
3070      * @param {int} iPageX the X coordinate of the mousedown or drag event
3071      * @param {int} iPageY the Y coordinate of the mousedown or drag event
3072      */
3073     alignElWithMouse: function(el, iPageX, iPageY) {
3074         var oCoord = this.getTargetCoord(iPageX, iPageY);
3075         // this.logger.log("****alignElWithMouse : " + el.id + ", " + aCoord + ", " + el.style.display);
3076
3077         if (!this.deltaSetXY) {
3078             var aCoord = [oCoord.x, oCoord.y];
3079             YAHOO.util.Dom.setXY(el, aCoord);
3080
3081             var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
3082             var newTop  = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
3083
3084             this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
3085         } else {
3086             YAHOO.util.Dom.setStyle(el, "left", (oCoord.x + this.deltaSetXY[0]) + "px");
3087             YAHOO.util.Dom.setStyle(el, "top",  (oCoord.y + this.deltaSetXY[1]) + "px");
3088         }
3089
3090         this.cachePosition(oCoord.x, oCoord.y);
3091         var self = this;
3092         setTimeout(function() {
3093             self.autoScroll.call(self, oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
3094         }, 0);
3095     },
3096
3097     /**
3098      * Saves the most recent position so that we can reset the constraints and
3099      * tick marks on-demand.  We need to know this so that we can calculate the
3100      * number of pixels the element is offset from its original position.
3101      * @method cachePosition
3102      * @param iPageX the current x position (optional, this just makes it so we
3103      * don't have to look it up again)
3104      * @param iPageY the current y position (optional, this just makes it so we
3105      * don't have to look it up again)
3106      */
3107     cachePosition: function(iPageX, iPageY) {
3108         if (iPageX) {
3109             this.lastPageX = iPageX;
3110             this.lastPageY = iPageY;
3111         } else {
3112             var aCoord = YAHOO.util.Dom.getXY(this.getEl());
3113             this.lastPageX = aCoord[0];
3114             this.lastPageY = aCoord[1];
3115         }
3116     },
3117
3118     /**
3119      * Auto-scroll the window if the dragged object has been moved beyond the
3120      * visible window boundary.
3121      * @method autoScroll
3122      * @param {int} x the drag element's x position
3123      * @param {int} y the drag element's y position
3124      * @param {int} h the height of the drag element
3125      * @param {int} w the width of the drag element
3126      * @private
3127      */
3128     autoScroll: function(x, y, h, w) {
3129
3130         if (this.scroll) {
3131             // The client height
3132             var clientH = this.DDM.getClientHeight();
3133
3134             // The client width
3135             var clientW = this.DDM.getClientWidth();
3136
3137             // The amt scrolled down
3138             var st = this.DDM.getScrollTop();
3139
3140             // The amt scrolled right
3141             var sl = this.DDM.getScrollLeft();
3142
3143             // Location of the bottom of the element
3144             var bot = h + y;
3145
3146             // Location of the right of the element
3147             var right = w + x;
3148
3149             // The distance from the cursor to the bottom of the visible area,
3150             // adjusted so that we don't scroll if the cursor is beyond the
3151             // element drag constraints
3152             var toBot = (clientH + st - y - this.deltaY);
3153
3154             // The distance from the cursor to the right of the visible area
3155             var toRight = (clientW + sl - x - this.deltaX);
3156
3157             // this.logger.log( " x: " + x + " y: " + y + " h: " + h +
3158             // " clientH: " + clientH + " clientW: " + clientW +
3159             // " st: " + st + " sl: " + sl + " bot: " + bot +
3160             // " right: " + right + " toBot: " + toBot + " toRight: " + toRight);
3161
3162             // How close to the edge the cursor must be before we scroll
3163             // var thresh = (document.all) ? 100 : 40;
3164             var thresh = 40;
3165
3166             // How many pixels to scroll per autoscroll op.  This helps to reduce
3167             // clunky scrolling. IE is more sensitive about this ... it needs this
3168             // value to be higher.
3169             var scrAmt = (document.all) ? 80 : 30;
3170
3171             // Scroll down if we are near the bottom of the visible page and the
3172             // obj extends below the crease
3173             if ( bot > clientH && toBot < thresh ) {
3174                 window.scrollTo(sl, st + scrAmt);
3175             }
3176
3177             // Scroll up if the window is scrolled down and the top of the object
3178             // goes above the top border
3179             if ( y < st && st > 0 && y - st < thresh ) {
3180                 window.scrollTo(sl, st - scrAmt);
3181             }
3182
3183             // Scroll right if the obj is beyond the right border and the cursor is
3184             // near the border.
3185             if ( right > clientW && toRight < thresh ) {
3186                 window.scrollTo(sl + scrAmt, st);
3187             }
3188
3189             // Scroll left if the window has been scrolled to the right and the obj
3190             // extends past the left border
3191             if ( x < sl && sl > 0 && x - sl < thresh ) {
3192                 window.scrollTo(sl - scrAmt, st);
3193             }
3194         }
3195     },
3196
3197     /*
3198      * Sets up config options specific to this class. Overrides
3199      * YAHOO.util.DragDrop, but all versions of this method through the
3200      * inheritance chain are called
3201      */
3202     applyConfig: function() {
3203         YAHOO.util.DD.superclass.applyConfig.call(this);
3204         this.scroll = (this.config.scroll !== false);
3205     },
3206
3207     /*
3208      * Event that fires prior to the onMouseDown event.  Overrides
3209      * YAHOO.util.DragDrop.
3210      */
3211     b4MouseDown: function(e) {
3212         this.setStartPosition();
3213         // this.resetConstraints();
3214         this.autoOffset(YAHOO.util.Event.getPageX(e),
3215                             YAHOO.util.Event.getPageY(e));
3216     },
3217
3218     /*
3219      * Event that fires prior to the onDrag event.  Overrides
3220      * YAHOO.util.DragDrop.
3221      */
3222     b4Drag: function(e) {
3223         this.setDragElPos(YAHOO.util.Event.getPageX(e),
3224                             YAHOO.util.Event.getPageY(e));
3225     },
3226
3227     toString: function() {
3228         return ("DD " + this.id);
3229     }
3230
3231     //////////////////////////////////////////////////////////////////////////
3232     // Debugging ygDragDrop events that can be overridden
3233     //////////////////////////////////////////////////////////////////////////
3234     /*
3235     startDrag: function(x, y) {
3236         this.logger.log(this.id.toString()  + " startDrag");
3237     },
3238
3239     onDrag: function(e) {
3240         this.logger.log(this.id.toString() + " onDrag");
3241     },
3242
3243     onDragEnter: function(e, id) {
3244         this.logger.log(this.id.toString() + " onDragEnter: " + id);
3245     },
3246
3247     onDragOver: function(e, id) {
3248         this.logger.log(this.id.toString() + " onDragOver: " + id);
3249     },
3250
3251     onDragOut: function(e, id) {
3252         this.logger.log(this.id.toString() + " onDragOut: " + id);
3253     },
3254
3255     onDragDrop: function(e, id) {
3256         this.logger.log(this.id.toString() + " onDragDrop: " + id);
3257     },
3258
3259     endDrag: function(e) {
3260         this.logger.log(this.id.toString() + " endDrag");
3261     }
3262
3263     */
3264
3265 /**
3266 * @event mouseDownEvent
3267 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
3268 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3269 */
3270
3271 /**
3272 * @event b4MouseDownEvent
3273 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
3274 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3275 */
3276
3277 /**
3278 * @event mouseUpEvent
3279 * @description Fired from inside DragDropMgr when the drag operation is finished.
3280 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3281 */
3282
3283 /**
3284 * @event b4StartDragEvent
3285 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
3286 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3287 */
3288
3289 /**
3290 * @event startDragEvent
3291 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
3292 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3293 */
3294
3295 /**
3296 * @event b4EndDragEvent
3297 * @description Fires before the endDragEvent. Returning false will cancel.
3298 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3299 */
3300
3301 /**
3302 * @event endDragEvent
3303 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
3304 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3305 */
3306
3307 /**
3308 * @event dragEvent
3309 * @description Occurs every mousemove event while dragging.
3310 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3311 */
3312 /**
3313 * @event b4DragEvent
3314 * @description Fires before the dragEvent.
3315 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3316 */
3317 /**
3318 * @event invalidDropEvent
3319 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
3320 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3321 */
3322 /**
3323 * @event b4DragOutEvent
3324 * @description Fires before the dragOutEvent
3325 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3326 */
3327 /**
3328 * @event dragOutEvent
3329 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
3330 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3331 */
3332 /**
3333 * @event dragEnterEvent
3334 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
3335 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3336 */
3337 /**
3338 * @event b4DragOverEvent
3339 * @description Fires before the dragOverEvent.
3340 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3341 */
3342 /**
3343 * @event dragOverEvent
3344 * @description Fires every mousemove event while over a drag and drop object.
3345 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3346 */
3347 /**
3348 * @event b4DragDropEvent
3349 * @description Fires before the dragDropEvent
3350 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3351 */
3352 /**
3353 * @event dragDropEvent
3354 * @description Fires when the dragged objects is dropped on another.
3355 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3356 */
3357 });
3358 /**
3359  * A DragDrop implementation that inserts an empty, bordered div into
3360  * the document that follows the cursor during drag operations.  At the time of
3361  * the click, the frame div is resized to the dimensions of the linked html
3362  * element, and moved to the exact location of the linked element.
3363  *
3364  * References to the "frame" element refer to the single proxy element that
3365  * was created to be dragged in place of all DDProxy elements on the
3366  * page.
3367  *
3368  * @class DDProxy
3369  * @extends YAHOO.util.DD
3370  * @constructor
3371  * @param {String} id the id of the linked html element
3372  * @param {String} sGroup the group of related DragDrop objects
3373  * @param {object} config an object containing configurable attributes
3374  *                Valid properties for DDProxy in addition to those in DragDrop:
3375  *                   resizeFrame, centerFrame, dragElId
3376  */
3377 YAHOO.util.DDProxy = function(id, sGroup, config) {
3378     if (id) {
3379         this.init(id, sGroup, config);
3380         this.initFrame();
3381     }
3382 };
3383
3384 /**
3385  * The default drag frame div id
3386  * @property YAHOO.util.DDProxy.dragElId
3387  * @type String
3388  * @static
3389  */
3390 YAHOO.util.DDProxy.dragElId = "ygddfdiv";
3391
3392 YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD, {
3393
3394     /**
3395      * By default we resize the drag frame to be the same size as the element
3396      * we want to drag (this is to get the frame effect).  We can turn it off
3397      * if we want a different behavior.
3398      * @property resizeFrame
3399      * @type boolean
3400      */
3401     resizeFrame: true,
3402
3403     /**
3404      * By default the frame is positioned exactly where the drag element is, so
3405      * we use the cursor offset provided by YAHOO.util.DD.  Another option that works only if
3406      * you do not have constraints on the obj is to have the drag frame centered
3407      * around the cursor.  Set centerFrame to true for this effect.
3408      * @property centerFrame
3409      * @type boolean
3410      */
3411     centerFrame: false,
3412
3413     /**
3414      * Creates the proxy element if it does not yet exist
3415      * @method createFrame
3416      */
3417     createFrame: function() {
3418         var self=this, body=document.body;
3419
3420         if (!body || !body.firstChild) {
3421             setTimeout( function() { self.createFrame(); }, 50 );
3422             return;
3423         }
3424
3425         var div=this.getDragEl(), Dom=YAHOO.util.Dom;
3426
3427         if (!div) {
3428             div    = document.createElement("div");
3429             div.id = this.dragElId;
3430             var s  = div.style;
3431
3432             s.position   = "absolute";
3433             s.visibility = "hidden";
3434             s.cursor     = "move";
3435             s.border     = "2px solid #aaa";
3436             s.zIndex     = 999;
3437             s.height     = "25px";
3438             s.width      = "25px";
3439
3440             var _data = document.createElement('div');
3441             Dom.setStyle(_data, 'height', '100%');
3442             Dom.setStyle(_data, 'width', '100%');
3443             /**
3444             * If the proxy element has no background-color, then it is considered to the "transparent" by Internet Explorer.
3445             * Since it is "transparent" then the events pass through it to the iframe below.
3446             * So creating a "fake" div inside the proxy element and giving it a background-color, then setting it to an
3447             * opacity of 0, it appears to not be there, however IE still thinks that it is so the events never pass through.
3448             */
3449             Dom.setStyle(_data, 'background-color', '#ccc');
3450             Dom.setStyle(_data, 'opacity', '0');
3451             div.appendChild(_data);
3452
3453             // appendChild can blow up IE if invoked prior to the window load event
3454             // while rendering a table.  It is possible there are other scenarios
3455             // that would cause this to happen as well.
3456             body.insertBefore(div, body.firstChild);
3457         }
3458     },
3459
3460     /**
3461      * Initialization for the drag frame element.  Must be called in the
3462      * constructor of all subclasses
3463      * @method initFrame
3464      */
3465     initFrame: function() {
3466         this.createFrame();
3467     },
3468
3469     applyConfig: function() {
3470         //this.logger.log("DDProxy applyConfig");
3471         YAHOO.util.DDProxy.superclass.applyConfig.call(this);
3472
3473         this.resizeFrame = (this.config.resizeFrame !== false);
3474         this.centerFrame = (this.config.centerFrame);
3475         this.setDragElId(this.config.dragElId || YAHOO.util.DDProxy.dragElId);
3476     },
3477
3478     /**
3479      * Resizes the drag frame to the dimensions of the clicked object, positions
3480      * it over the object, and finally displays it
3481      * @method showFrame
3482      * @param {int} iPageX X click position
3483      * @param {int} iPageY Y click position
3484      * @private
3485      */
3486     showFrame: function(iPageX, iPageY) {
3487         var el = this.getEl();
3488         var dragEl = this.getDragEl();
3489         var s = dragEl.style;
3490
3491         this._resizeProxy();
3492
3493         if (this.centerFrame) {
3494             this.setDelta( Math.round(parseInt(s.width,  10)/2),
3495                            Math.round(parseInt(s.height, 10)/2) );
3496         }
3497
3498         this.setDragElPos(iPageX, iPageY);
3499
3500         YAHOO.util.Dom.setStyle(dragEl, "visibility", "visible");
3501     },
3502
3503     /**
3504      * The proxy is automatically resized to the dimensions of the linked
3505      * element when a drag is initiated, unless resizeFrame is set to false
3506      * @method _resizeProxy
3507      * @private
3508      */
3509     _resizeProxy: function() {
3510         if (this.resizeFrame) {
3511             var DOM    = YAHOO.util.Dom;
3512             var el     = this.getEl();
3513             var dragEl = this.getDragEl();
3514
3515             var bt = parseInt( DOM.getStyle(dragEl, "borderTopWidth"    ), 10);
3516             var br = parseInt( DOM.getStyle(dragEl, "borderRightWidth"  ), 10);
3517             var bb = parseInt( DOM.getStyle(dragEl, "borderBottomWidth" ), 10);
3518             var bl = parseInt( DOM.getStyle(dragEl, "borderLeftWidth"   ), 10);
3519
3520             if (isNaN(bt)) { bt = 0; }
3521             if (isNaN(br)) { br = 0; }
3522             if (isNaN(bb)) { bb = 0; }
3523             if (isNaN(bl)) { bl = 0; }
3524
3525             this.logger.log("proxy size: " + bt + "  " + br + " " + bb + " " + bl);
3526
3527             var newWidth  = Math.max(0, el.offsetWidth  - br - bl);
3528             var newHeight = Math.max(0, el.offsetHeight - bt - bb);
3529
3530             this.logger.log("Resizing proxy element");
3531
3532             DOM.setStyle( dragEl, "width",  newWidth  + "px" );
3533             DOM.setStyle( dragEl, "height", newHeight + "px" );
3534         }
3535     },
3536
3537     // overrides YAHOO.util.DragDrop
3538     b4MouseDown: function(e) {
3539         this.setStartPosition();
3540         var x = YAHOO.util.Event.getPageX(e);
3541         var y = YAHOO.util.Event.getPageY(e);
3542         this.autoOffset(x, y);
3543
3544         // This causes the autoscroll code to kick off, which means autoscroll can
3545         // happen prior to the check for a valid drag handle.
3546         // this.setDragElPos(x, y);
3547     },
3548
3549     // overrides YAHOO.util.DragDrop
3550     b4StartDrag: function(x, y) {
3551         // show the drag frame
3552         this.logger.log("start drag show frame, x: " + x + ", y: " + y);
3553         this.showFrame(x, y);
3554     },
3555
3556     // overrides YAHOO.util.DragDrop
3557     b4EndDrag: function(e) {
3558         this.logger.log(this.id + " b4EndDrag");
3559         YAHOO.util.Dom.setStyle(this.getDragEl(), "visibility", "hidden");
3560     },
3561
3562     // overrides YAHOO.util.DragDrop
3563     // By default we try to move the element to the last location of the frame.
3564     // This is so that the default behavior mirrors that of YAHOO.util.DD.
3565     endDrag: function(e) {
3566         var DOM = YAHOO.util.Dom;
3567         this.logger.log(this.id + " endDrag");
3568         var lel = this.getEl();
3569         var del = this.getDragEl();
3570
3571         // Show the drag frame briefly so we can get its position
3572         // del.style.visibility = "";
3573         DOM.setStyle(del, "visibility", "");
3574
3575         // Hide the linked element before the move to get around a Safari
3576         // rendering bug.
3577         //lel.style.visibility = "hidden";
3578         DOM.setStyle(lel, "visibility", "hidden");
3579         YAHOO.util.DDM.moveToEl(lel, del);
3580         //del.style.visibility = "hidden";
3581         DOM.setStyle(del, "visibility", "hidden");
3582         //lel.style.visibility = "";
3583         DOM.setStyle(lel, "visibility", "");
3584     },
3585
3586     toString: function() {
3587         return ("DDProxy " + this.id);
3588     }
3589 /**
3590 * @event mouseDownEvent
3591 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
3592 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3593 */
3594
3595 /**
3596 * @event b4MouseDownEvent
3597 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
3598 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3599 */
3600
3601 /**
3602 * @event mouseUpEvent
3603 * @description Fired from inside DragDropMgr when the drag operation is finished.
3604 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3605 */
3606
3607 /**
3608 * @event b4StartDragEvent
3609 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
3610 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3611 */
3612
3613 /**
3614 * @event startDragEvent
3615 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
3616 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3617 */
3618
3619 /**
3620 * @event b4EndDragEvent
3621 * @description Fires before the endDragEvent. Returning false will cancel.
3622 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3623 */
3624
3625 /**
3626 * @event endDragEvent
3627 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
3628 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3629 */
3630
3631 /**
3632 * @event dragEvent
3633 * @description Occurs every mousemove event while dragging.
3634 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3635 */
3636 /**
3637 * @event b4DragEvent
3638 * @description Fires before the dragEvent.
3639 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3640 */
3641 /**
3642 * @event invalidDropEvent
3643 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
3644 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3645 */
3646 /**
3647 * @event b4DragOutEvent
3648 * @description Fires before the dragOutEvent
3649 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3650 */
3651 /**
3652 * @event dragOutEvent
3653 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
3654 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3655 */
3656 /**
3657 * @event dragEnterEvent
3658 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
3659 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3660 */
3661 /**
3662 * @event b4DragOverEvent
3663 * @description Fires before the dragOverEvent.
3664 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3665 */
3666 /**
3667 * @event dragOverEvent
3668 * @description Fires every mousemove event while over a drag and drop object.
3669 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3670 */
3671 /**
3672 * @event b4DragDropEvent
3673 * @description Fires before the dragDropEvent
3674 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3675 */
3676 /**
3677 * @event dragDropEvent
3678 * @description Fires when the dragged objects is dropped on another.
3679 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3680 */
3681
3682 });
3683 /**
3684  * A DragDrop implementation that does not move, but can be a drop
3685  * target.  You would get the same result by simply omitting implementation
3686  * for the event callbacks, but this way we reduce the processing cost of the
3687  * event listener and the callbacks.
3688  * @class DDTarget
3689  * @extends YAHOO.util.DragDrop
3690  * @constructor
3691  * @param {String} id the id of the element that is a drop target
3692  * @param {String} sGroup the group of related DragDrop objects
3693  * @param {object} config an object containing configurable attributes
3694  *                 Valid properties for DDTarget in addition to those in
3695  *                 DragDrop:
3696  *                    none
3697  */
3698 YAHOO.util.DDTarget = function(id, sGroup, config) {
3699     if (id) {
3700         this.initTarget(id, sGroup, config);
3701     }
3702 };
3703
3704 // YAHOO.util.DDTarget.prototype = new YAHOO.util.DragDrop();
3705 YAHOO.extend(YAHOO.util.DDTarget, YAHOO.util.DragDrop, {
3706     toString: function() {
3707         return ("DDTarget " + this.id);
3708     }
3709 });
3710 YAHOO.register("dragdrop", YAHOO.util.DragDropMgr, {version: "2.8.0r4", build: "2449"});