git.roojs.org Git - roojs1/blob - roojs-ui-debug.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13
  14 /*
  15  * These classes are derivatives of the similarly named classes in the YUI Library.
  16  * The original license:
  17  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
  18  * Code licensed under the BSD License:
  19  * http://developer.yahoo.net/yui/license.txt
  20  */
  21
  22 (function() {
  23
  24 var Event=Roo.EventManager;
  25 var Dom=Roo.lib.Dom;
  26
  27 /**
  28  * @class Roo.dd.DragDrop
  29  * Defines the interface and base operation of items that that can be
  30  * dragged or can be drop targets.  It was designed to be extended, overriding
  31  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
  32  * Up to three html elements can be associated with a DragDrop instance:
  33  * <ul>
  34  * <li>linked element: the element that is passed into the constructor.
  35  * This is the element which defines the boundaries for interaction with
  36  * other DragDrop objects.</li>
  37  * <li>handle element(s): The drag operation only occurs if the element that
  38  * was clicked matches a handle element.  By default this is the linked
  39  * element, but there are times that you will want only a portion of the
  40  * linked element to initiate the drag operation, and the setHandleElId()
  41  * method provides a way to define this.</li>
  42  * <li>drag element: this represents the element that would be moved along
  43  * with the cursor during a drag operation.  By default, this is the linked
  44  * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
  45  * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
  46  * </li>
  47  * </ul>
  48  * This class should not be instantiated until the onload event to ensure that
  49  * the associated elements are available.
  50  * The following would define a DragDrop obj that would interact with any
  51  * other DragDrop obj in the "group1" group:
  52  * <pre>
  53  *  dd = new Roo.dd.DragDrop("div1", "group1");
  54  * </pre>
  55  * Since none of the event handlers have been implemented, nothing would
  56  * actually happen if you were to run the code above.  Normally you would
  57  * override this class or one of the default implementations, but you can
  58  * also override the methods you want on an instance of the class...
  59  * <pre>
  60  *  dd.onDragDrop = function(e, id) {
  61  *  &nbsp;&nbsp;alert("dd was dropped on " + id);
  62  *  }
  63  * </pre>
  64  * @constructor
  65  * @param {String} id of the element that is linked to this instance
  66  * @param {String} sGroup the group of related DragDrop objects
  67  * @param {object} config an object containing configurable attributes
  68  *                Valid properties for DragDrop:
  69  *                    padding, isTarget, maintainOffset, primaryButtonOnly
  70  */
  71 Roo.dd.DragDrop = function(id, sGroup, config) {
  72     if (id) {
  73         this.init(id, sGroup, config);
  74     }
  75     if (config.listeners || config.events) {
  76         Roo.BasicLayoutRegion.superclass.constructor.call(this,  {
  77             listeners : config.listeners || {},
  78             events : config.events || {}
  79         });
  80     }
  81 };
  82
  83 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
  84
  85     /**
  86      * The id of the element associated with this object.  This is what we
  87      * refer to as the "linked element" because the size and position of
  88      * this element is used to determine when the drag and drop objects have
  89      * interacted.
  90      * @property id
  91      * @type String
  92      */
  93     id: null,
  94
  95     /**
  96      * Configuration attributes passed into the constructor
  97      * @property config
  98      * @type object
  99      */
 100     config: null,
 101
 102     /**
 103      * The id of the element that will be dragged.  By default this is same
 104      * as the linked element , but could be changed to another element. Ex:
 105      * Roo.dd.DDProxy
 106      * @property dragElId
 107      * @type String
 108      * @private
 109      */
 110     dragElId: null,
 111
 112     /**
 113      * the id of the element that initiates the drag operation.  By default
 114      * this is the linked element, but could be changed to be a child of this
 115      * element.  This lets us do things like only starting the drag when the
 116      * header element within the linked html element is clicked.
 117      * @property handleElId
 118      * @type String
 119      * @private
 120      */
 121     handleElId: null,
 122
 123     /**
 124      * An associative array of HTML tags that will be ignored if clicked.
 125      * @property invalidHandleTypes
 126      * @type {string: string}
 127      */
 128     invalidHandleTypes: null,
 129
 130     /**
 131      * An associative array of ids for elements that will be ignored if clicked
 132      * @property invalidHandleIds
 133      * @type {string: string}
 134      */
 135     invalidHandleIds: null,
 136
 137     /**
 138      * An indexted array of css class names for elements that will be ignored
 139      * if clicked.
 140      * @property invalidHandleClasses
 141      * @type string[]
 142      */
 143     invalidHandleClasses: null,
 144
 145     /**
 146      * The linked element's absolute X position at the time the drag was
 147      * started
 148      * @property startPageX
 149      * @type int
 150      * @private
 151      */
 152     startPageX: 0,
 153
 154     /**
 155      * The linked element's absolute X position at the time the drag was
 156      * started
 157      * @property startPageY
 158      * @type int
 159      * @private
 160      */
 161     startPageY: 0,
 162
 163     /**
 164      * The group defines a logical collection of DragDrop objects that are
 165      * related.  Instances only get events when interacting with other
 166      * DragDrop object in the same group.  This lets us define multiple
 167      * groups using a single DragDrop subclass if we want.
 168      * @property groups
 169      * @type {string: string}
 170      */
 171     groups: null,
 172
 173     /**
 174      * Individual drag/drop instances can be locked.  This will prevent
 175      * onmousedown start drag.
 176      * @property locked
 177      * @type boolean
 178      * @private
 179      */
 180     locked: false,
 181
 182     /**
 183      * Lock this instance
 184      * @method lock
 185      */
 186     lock: function() { this.locked = true; },
 187
 188     /**
 189      * Unlock this instace
 190      * @method unlock
 191      */
 192     unlock: function() { this.locked = false; },
 193
 194     /**
 195      * By default, all insances can be a drop target.  This can be disabled by
 196      * setting isTarget to false.
 197      * @method isTarget
 198      * @type boolean
 199      */
 200     isTarget: true,
 201
 202     /**
 203      * The padding configured for this drag and drop object for calculating
 204      * the drop zone intersection with this object.
 205      * @method padding
 206      * @type int[]
 207      */
 208     padding: null,
 209
 210     /**
 211      * Cached reference to the linked element
 212      * @property _domRef
 213      * @private
 214      */
 215     _domRef: null,
 216
 217     /**
 218      * Internal typeof flag
 219      * @property __ygDragDrop
 220      * @private
 221      */
 222     __ygDragDrop: true,
 223
 224     /**
 225      * Set to true when horizontal contraints are applied
 226      * @property constrainX
 227      * @type boolean
 228      * @private
 229      */
 230     constrainX: false,
 231
 232     /**
 233      * Set to true when vertical contraints are applied
 234      * @property constrainY
 235      * @type boolean
 236      * @private
 237      */
 238     constrainY: false,
 239
 240     /**
 241      * The left constraint
 242      * @property minX
 243      * @type int
 244      * @private
 245      */
 246     minX: 0,
 247
 248     /**
 249      * The right constraint
 250      * @property maxX
 251      * @type int
 252      * @private
 253      */
 254     maxX: 0,
 255
 256     /**
 257      * The up constraint
 258      * @property minY
 259      * @type int
 260      * @type int
 261      * @private
 262      */
 263     minY: 0,
 264
 265     /**
 266      * The down constraint
 267      * @property maxY
 268      * @type int
 269      * @private
 270      */
 271     maxY: 0,
 272
 273     /**
 274      * Maintain offsets when we resetconstraints.  Set to true when you want
 275      * the position of the element relative to its parent to stay the same
 276      * when the page changes
 277      *
 278      * @property maintainOffset
 279      * @type boolean
 280      */
 281     maintainOffset: false,
 282
 283     /**
 284      * Array of pixel locations the element will snap to if we specified a
 285      * horizontal graduation/interval.  This array is generated automatically
 286      * when you define a tick interval.
 287      * @property xTicks
 288      * @type int[]
 289      */
 290     xTicks: null,
 291
 292     /**
 293      * Array of pixel locations the element will snap to if we specified a
 294      * vertical graduation/interval.  This array is generated automatically
 295      * when you define a tick interval.
 296      * @property yTicks
 297      * @type int[]
 298      */
 299     yTicks: null,
 300
 301     /**
 302      * By default the drag and drop instance will only respond to the primary
 303      * button click (left button for a right-handed mouse).  Set to true to
 304      * allow drag and drop to start with any mouse click that is propogated
 305      * by the browser
 306      * @property primaryButtonOnly
 307      * @type boolean
 308      */
 309     primaryButtonOnly: true,
 310
 311     /**
 312      * The availabe property is false until the linked dom element is accessible.
 313      * @property available
 314      * @type boolean
 315      */
 316     available: false,
 317
 318     /**
 319      * By default, drags can only be initiated if the mousedown occurs in the
 320      * region the linked element is.  This is done in part to work around a
 321      * bug in some browsers that mis-report the mousedown if the previous
 322      * mouseup happened outside of the window.  This property is set to true
 323      * if outer handles are defined.
 324      *
 325      * @property hasOuterHandles
 326      * @type boolean
 327      * @default false
 328      */
 329     hasOuterHandles: false,
 330
 331     /**
 332      * Code that executes immediately before the startDrag event
 333      * @method b4StartDrag
 334      * @private
 335      */
 336     b4StartDrag: function(x, y) { },
 337
 338     /**
 339      * Abstract method called after a drag/drop object is clicked
 340      * and the drag or mousedown time thresholds have beeen met.
 341      * @method startDrag
 342      * @param {int} X click location
 343      * @param {int} Y click location
 344      */
 345     startDrag: function(x, y) { /* override this */ },
 346
 347     /**
 348      * Code that executes immediately before the onDrag event
 349      * @method b4Drag
 350      * @private
 351      */
 352     b4Drag: function(e) { },
 353
 354     /**
 355      * Abstract method called during the onMouseMove event while dragging an
 356      * object.
 357      * @method onDrag
 358      * @param {Event} e the mousemove event
 359      */
 360     onDrag: function(e) { /* override this */ },
 361
 362     /**
 363      * Abstract method called when this element fist begins hovering over
 364      * another DragDrop obj
 365      * @method onDragEnter
 366      * @param {Event} e the mousemove event
 367      * @param {String|DragDrop[]} id In POINT mode, the element
 368      * id this is hovering over.  In INTERSECT mode, an array of one or more
 369      * dragdrop items being hovered over.
 370      */
 371     onDragEnter: function(e, id) { /* override this */ },
 372
 373     /**
 374      * Code that executes immediately before the onDragOver event
 375      * @method b4DragOver
 376      * @private
 377      */
 378     b4DragOver: function(e) { },
 379
 380     /**
 381      * Abstract method called when this element is hovering over another
 382      * DragDrop obj
 383      * @method onDragOver
 384      * @param {Event} e the mousemove event
 385      * @param {String|DragDrop[]} id In POINT mode, the element
 386      * id this is hovering over.  In INTERSECT mode, an array of dd items
 387      * being hovered over.
 388      */
 389     onDragOver: function(e, id) { /* override this */ },
 390
 391     /**
 392      * Code that executes immediately before the onDragOut event
 393      * @method b4DragOut
 394      * @private
 395      */
 396     b4DragOut: function(e) { },
 397
 398     /**
 399      * Abstract method called when we are no longer hovering over an element
 400      * @method onDragOut
 401      * @param {Event} e the mousemove event
 402      * @param {String|DragDrop[]} id In POINT mode, the element
 403      * id this was hovering over.  In INTERSECT mode, an array of dd items
 404      * that the mouse is no longer over.
 405      */
 406     onDragOut: function(e, id) { /* override this */ },
 407
 408     /**
 409      * Code that executes immediately before the onDragDrop event
 410      * @method b4DragDrop
 411      * @private
 412      */
 413     b4DragDrop: function(e) { },
 414
 415     /**
 416      * Abstract method called when this item is dropped on another DragDrop
 417      * obj
 418      * @method onDragDrop
 419      * @param {Event} e the mouseup event
 420      * @param {String|DragDrop[]} id In POINT mode, the element
 421      * id this was dropped on.  In INTERSECT mode, an array of dd items this
 422      * was dropped on.
 423      */
 424     onDragDrop: function(e, id) { /* override this */ },
 425
 426     /**
 427      * Abstract method called when this item is dropped on an area with no
 428      * drop target
 429      * @method onInvalidDrop
 430      * @param {Event} e the mouseup event
 431      */
 432     onInvalidDrop: function(e) { /* override this */ },
 433
 434     /**
 435      * Code that executes immediately before the endDrag event
 436      * @method b4EndDrag
 437      * @private
 438      */
 439     b4EndDrag: function(e) { },
 440
 441     /**
 442      * Fired when we are done dragging the object
 443      * @method endDrag
 444      * @param {Event} e the mouseup event
 445      */
 446     endDrag: function(e) { /* override this */ },
 447
 448     /**
 449      * Code executed immediately before the onMouseDown event
 450      * @method b4MouseDown
 451      * @param {Event} e the mousedown event
 452      * @private
 453      */
 454     b4MouseDown: function(e) {  },
 455
 456     /**
 457      * Event handler that fires when a drag/drop obj gets a mousedown
 458      * @method onMouseDown
 459      * @param {Event} e the mousedown event
 460      */
 461     onMouseDown: function(e) { /* override this */ },
 462
 463     /**
 464      * Event handler that fires when a drag/drop obj gets a mouseup
 465      * @method onMouseUp
 466      * @param {Event} e the mouseup event
 467      */
 468     onMouseUp: function(e) { /* override this */ },
 469
 470     /**
 471      * Override the onAvailable method to do what is needed after the initial
 472      * position was determined.
 473      * @method onAvailable
 474      */
 475     onAvailable: function () {
 476     },
 477
 478     /*
 479      * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
 480      * @type Object
 481      */
 482     defaultPadding : {left:0, right:0, top:0, bottom:0},
 483
 484     /*
 485      * Initializes the drag drop object's constraints to restrict movement to a certain element.
 486  *
 487  * Usage:
 488  <pre><code>
 489  var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
 490                 { dragElId: "existingProxyDiv" });
 491  dd.startDrag = function(){
 492      this.constrainTo("parent-id");
 493  };
 494  </code></pre>
 495  * Or you can initalize it using the {@link Roo.Element} object:
 496  <pre><code>
 497  Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
 498      startDrag : function(){
 499          this.constrainTo("parent-id");
 500      }
 501  });
 502  </code></pre>
 503      * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
 504      * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
 505      * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
 506      * an object containing the sides to pad. For example: {right:10, bottom:10}
 507      * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
 508      */
 509     constrainTo : function(constrainTo, pad, inContent){
 510         if(typeof pad == "number"){
 511             pad = {left: pad, right:pad, top:pad, bottom:pad};
 512         }
 513         pad = pad || this.defaultPadding;
 514         var b = Roo.get(this.getEl()).getBox();
 515         var ce = Roo.get(constrainTo);
 516         var s = ce.getScroll();
 517         var c, cd = ce.dom;
 518         if(cd == document.body){
 519             c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
 520         }else{
 521             xy = ce.getXY();
 522             c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
 523         }
 524
 525
 526         var topSpace = b.y - c.y;
 527         var leftSpace = b.x - c.x;
 528
 529         this.resetConstraints();
 530         this.setXConstraint(leftSpace - (pad.left||0), // left
 531                 c.width - leftSpace - b.width - (pad.right||0) //right
 532         );
 533         this.setYConstraint(topSpace - (pad.top||0), //top
 534                 c.height - topSpace - b.height - (pad.bottom||0) //bottom
 535         );
 536     },
 537
 538     /**
 539      * Returns a reference to the linked element
 540      * @method getEl
 541      * @return {HTMLElement} the html element
 542      */
 543     getEl: function() {
 544         if (!this._domRef) {
 545             this._domRef = Roo.getDom(this.id);
 546         }
 547
 548         return this._domRef;
 549     },
 550
 551     /**
 552      * Returns a reference to the actual element to drag.  By default this is
 553      * the same as the html element, but it can be assigned to another
 554      * element. An example of this can be found in Roo.dd.DDProxy
 555      * @method getDragEl
 556      * @return {HTMLElement} the html element
 557      */
 558     getDragEl: function() {
 559         return Roo.getDom(this.dragElId);
 560     },
 561
 562     /**
 563      * Sets up the DragDrop object.  Must be called in the constructor of any
 564      * Roo.dd.DragDrop subclass
 565      * @method init
 566      * @param id the id of the linked element
 567      * @param {String} sGroup the group of related items
 568      * @param {object} config configuration attributes
 569      */
 570     init: function(id, sGroup, config) {
 571         this.initTarget(id, sGroup, config);
 572         Event.on(this.id, "mousedown", this.handleMouseDown, this);
 573         // Event.on(this.id, "selectstart", Event.preventDefault);
 574     },
 575
 576     /**
 577      * Initializes Targeting functionality only... the object does not
 578      * get a mousedown handler.
 579      * @method initTarget
 580      * @param id the id of the linked element
 581      * @param {String} sGroup the group of related items
 582      * @param {object} config configuration attributes
 583      */
 584     initTarget: function(id, sGroup, config) {
 585
 586         // configuration attributes
 587         this.config = config || {};
 588
 589         // create a local reference to the drag and drop manager
 590         this.DDM = Roo.dd.DDM;
 591         // initialize the groups array
 592         this.groups = {};
 593
 594         // assume that we have an element reference instead of an id if the
 595         // parameter is not a string
 596         if (typeof id !== "string") {
 597             id = Roo.id(id);
 598         }
 599
 600         // set the id
 601         this.id = id;
 602
 603         // add to an interaction group
 604         this.addToGroup((sGroup) ? sGroup : "default");
 605
 606         // We don't want to register this as the handle with the manager
 607         // so we just set the id rather than calling the setter.
 608         this.handleElId = id;
 609
 610         // the linked element is the element that gets dragged by default
 611         this.setDragElId(id);
 612
 613         // by default, clicked anchors will not start drag operations.
 614         this.invalidHandleTypes = { A: "A" };
 615         this.invalidHandleIds = {};
 616         this.invalidHandleClasses = [];
 617
 618         this.applyConfig();
 619
 620         this.handleOnAvailable();
 621     },
 622
 623     /**
 624      * Applies the configuration parameters that were passed into the constructor.
 625      * This is supposed to happen at each level through the inheritance chain.  So
 626      * a DDProxy implentation will execute apply config on DDProxy, DD, and
 627      * DragDrop in order to get all of the parameters that are available in
 628      * each object.
 629      * @method applyConfig
 630      */
 631     applyConfig: function() {
 632
 633         // configurable properties:
 634         //    padding, isTarget, maintainOffset, primaryButtonOnly
 635         this.padding           = this.config.padding || [0, 0, 0, 0];
 636         this.isTarget          = (this.config.isTarget !== false);
 637         this.maintainOffset    = (this.config.maintainOffset);
 638         this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
 639
 640     },
 641
 642     /**
 643      * Executed when the linked element is available
 644      * @method handleOnAvailable
 645      * @private
 646      */
 647     handleOnAvailable: function() {
 648         this.available = true;
 649         this.resetConstraints();
 650         this.onAvailable();
 651     },
 652
 653      /**
 654      * Configures the padding for the target zone in px.  Effectively expands
 655      * (or reduces) the virtual object size for targeting calculations.
 656      * Supports css-style shorthand; if only one parameter is passed, all sides
 657      * will have that padding, and if only two are passed, the top and bottom
 658      * will have the first param, the left and right the second.
 659      * @method setPadding
 660      * @param {int} iTop    Top pad
 661      * @param {int} iRight  Right pad
 662      * @param {int} iBot    Bot pad
 663      * @param {int} iLeft   Left pad
 664      */
 665     setPadding: function(iTop, iRight, iBot, iLeft) {
 666         // this.padding = [iLeft, iRight, iTop, iBot];
 667         if (!iRight && 0 !== iRight) {
 668             this.padding = [iTop, iTop, iTop, iTop];
 669         } else if (!iBot && 0 !== iBot) {
 670             this.padding = [iTop, iRight, iTop, iRight];
 671         } else {
 672             this.padding = [iTop, iRight, iBot, iLeft];
 673         }
 674     },
 675
 676     /**
 677      * Stores the initial placement of the linked element.
 678      * @method setInitialPosition
 679      * @param {int} diffX   the X offset, default 0
 680      * @param {int} diffY   the Y offset, default 0
 681      */
 682     setInitPosition: function(diffX, diffY) {
 683         var el = this.getEl();
 684
 685         if (!this.DDM.verifyEl(el)) {
 686             return;
 687         }
 688
 689         var dx = diffX || 0;
 690         var dy = diffY || 0;
 691
 692         var p = Dom.getXY( el );
 693
 694         this.initPageX = p[0] - dx;
 695         this.initPageY = p[1] - dy;
 696
 697         this.lastPageX = p[0];
 698         this.lastPageY = p[1];
 699
 700
 701         this.setStartPosition(p);
 702     },
 703
 704     /**
 705      * Sets the start position of the element.  This is set when the obj
 706      * is initialized, the reset when a drag is started.
 707      * @method setStartPosition
 708      * @param pos current position (from previous lookup)
 709      * @private
 710      */
 711     setStartPosition: function(pos) {
 712         var p = pos || Dom.getXY( this.getEl() );
 713         this.deltaSetXY = null;
 714
 715         this.startPageX = p[0];
 716         this.startPageY = p[1];
 717     },
 718
 719     /**
 720      * Add this instance to a group of related drag/drop objects.  All
 721      * instances belong to at least one group, and can belong to as many
 722      * groups as needed.
 723      * @method addToGroup
 724      * @param sGroup {string} the name of the group
 725      */
 726     addToGroup: function(sGroup) {
 727         this.groups[sGroup] = true;
 728         this.DDM.regDragDrop(this, sGroup);
 729     },
 730
 731     /**
 732      * Remove's this instance from the supplied interaction group
 733      * @method removeFromGroup
 734      * @param {string}  sGroup  The group to drop
 735      */
 736     removeFromGroup: function(sGroup) {
 737         if (this.groups[sGroup]) {
 738             delete this.groups[sGroup];
 739         }
 740
 741         this.DDM.removeDDFromGroup(this, sGroup);
 742     },
 743
 744     /**
 745      * Allows you to specify that an element other than the linked element
 746      * will be moved with the cursor during a drag
 747      * @method setDragElId
 748      * @param id {string} the id of the element that will be used to initiate the drag
 749      */
 750     setDragElId: function(id) {
 751         this.dragElId = id;
 752     },
 753
 754     /**
 755      * Allows you to specify a child of the linked element that should be
 756      * used to initiate the drag operation.  An example of this would be if
 757      * you have a content div with text and links.  Clicking anywhere in the
 758      * content area would normally start the drag operation.  Use this method
 759      * to specify that an element inside of the content div is the element
 760      * that starts the drag operation.
 761      * @method setHandleElId
 762      * @param id {string} the id of the element that will be used to
 763      * initiate the drag.
 764      */
 765     setHandleElId: function(id) {
 766         if (typeof id !== "string") {
 767             id = Roo.id(id);
 768         }
 769         this.handleElId = id;
 770         this.DDM.regHandle(this.id, id);
 771     },
 772
 773     /**
 774      * Allows you to set an element outside of the linked element as a drag
 775      * handle
 776      * @method setOuterHandleElId
 777      * @param id the id of the element that will be used to initiate the drag
 778      */
 779     setOuterHandleElId: function(id) {
 780         if (typeof id !== "string") {
 781             id = Roo.id(id);
 782         }
 783         Event.on(id, "mousedown",
 784                 this.handleMouseDown, this);
 785         this.setHandleElId(id);
 786
 787         this.hasOuterHandles = true;
 788     },
 789
 790     /**
 791      * Remove all drag and drop hooks for this element
 792      * @method unreg
 793      */
 794     unreg: function() {
 795         Event.un(this.id, "mousedown",
 796                 this.handleMouseDown);
 797         this._domRef = null;
 798         this.DDM._remove(this);
 799     },
 800
 801     destroy : function(){
 802         this.unreg();
 803     },
 804
 805     /**
 806      * Returns true if this instance is locked, or the drag drop mgr is locked
 807      * (meaning that all drag/drop is disabled on the page.)
 808      * @method isLocked
 809      * @return {boolean} true if this obj or all drag/drop is locked, else
 810      * false
 811      */
 812     isLocked: function() {
 813         return (this.DDM.isLocked() || this.locked);
 814     },
 815
 816     /**
 817      * Fired when this object is clicked
 818      * @method handleMouseDown
 819      * @param {Event} e
 820      * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
 821      * @private
 822      */
 823     handleMouseDown: function(e, oDD){
 824         if (this.primaryButtonOnly && e.button != 0) {
 825             return;
 826         }
 827
 828         if (this.isLocked()) {
 829             return;
 830         }
 831
 832         this.DDM.refreshCache(this.groups);
 833
 834         var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
 835         if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
 836         } else {
 837             if (this.clickValidator(e)) {
 838
 839                 // set the initial element position
 840                 this.setStartPosition();
 841
 842
 843                 this.b4MouseDown(e);
 844                 this.onMouseDown(e);
 845
 846                 this.DDM.handleMouseDown(e, this);
 847
 848                 this.DDM.stopEvent(e);
 849             } else {
 850
 851
 852             }
 853         }
 854     },
 855
 856     clickValidator: function(e) {
 857         var target = e.getTarget();
 858         return ( this.isValidHandleChild(target) &&
 859                     (this.id == this.handleElId ||
 860                         this.DDM.handleWasClicked(target, this.id)) );
 861     },
 862
 863     /**
 864      * Allows you to specify a tag name that should not start a drag operation
 865      * when clicked.  This is designed to facilitate embedding links within a
 866      * drag handle that do something other than start the drag.
 867      * @method addInvalidHandleType
 868      * @param {string} tagName the type of element to exclude
 869      */
 870     addInvalidHandleType: function(tagName) {
 871         var type = tagName.toUpperCase();
 872         this.invalidHandleTypes[type] = type;
 873     },
 874
 875     /**
 876      * Lets you to specify an element id for a child of a drag handle
 877      * that should not initiate a drag
 878      * @method addInvalidHandleId
 879      * @param {string} id the element id of the element you wish to ignore
 880      */
 881     addInvalidHandleId: function(id) {
 882         if (typeof id !== "string") {
 883             id = Roo.id(id);
 884         }
 885         this.invalidHandleIds[id] = id;
 886     },
 887
 888     /**
 889      * Lets you specify a css class of elements that will not initiate a drag
 890      * @method addInvalidHandleClass
 891      * @param {string} cssClass the class of the elements you wish to ignore
 892      */
 893     addInvalidHandleClass: function(cssClass) {
 894         this.invalidHandleClasses.push(cssClass);
 895     },
 896
 897     /**
 898      * Unsets an excluded tag name set by addInvalidHandleType
 899      * @method removeInvalidHandleType
 900      * @param {string} tagName the type of element to unexclude
 901      */
 902     removeInvalidHandleType: function(tagName) {
 903         var type = tagName.toUpperCase();
 904         // this.invalidHandleTypes[type] = null;
 905         delete this.invalidHandleTypes[type];
 906     },
 907
 908     /**
 909      * Unsets an invalid handle id
 910      * @method removeInvalidHandleId
 911      * @param {string} id the id of the element to re-enable
 912      */
 913     removeInvalidHandleId: function(id) {
 914         if (typeof id !== "string") {
 915             id = Roo.id(id);
 916         }
 917         delete this.invalidHandleIds[id];
 918     },
 919
 920     /**
 921      * Unsets an invalid css class
 922      * @method removeInvalidHandleClass
 923      * @param {string} cssClass the class of the element(s) you wish to
 924      * re-enable
 925      */
 926     removeInvalidHandleClass: function(cssClass) {
 927         for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
 928             if (this.invalidHandleClasses[i] == cssClass) {
 929                 delete this.invalidHandleClasses[i];
 930             }
 931         }
 932     },
 933
 934     /**
 935      * Checks the tag exclusion list to see if this click should be ignored
 936      * @method isValidHandleChild
 937      * @param {HTMLElement} node the HTMLElement to evaluate
 938      * @return {boolean} true if this is a valid tag type, false if not
 939      */
 940     isValidHandleChild: function(node) {
 941
 942         var valid = true;
 943         // var n = (node.nodeName == "#text") ? node.parentNode : node;
 944         var nodeName;
 945         try {
 946             nodeName = node.nodeName.toUpperCase();
 947         } catch(e) {
 948             nodeName = node.nodeName;
 949         }
 950         valid = valid && !this.invalidHandleTypes[nodeName];
 951         valid = valid && !this.invalidHandleIds[node.id];
 952
 953         for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
 954             valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
 955         }
 956
 957
 958         return valid;
 959
 960     },
 961
 962     /**
 963      * Create the array of horizontal tick marks if an interval was specified
 964      * in setXConstraint().
 965      * @method setXTicks
 966      * @private
 967      */
 968     setXTicks: function(iStartX, iTickSize) {
 969         this.xTicks = [];
 970         this.xTickSize = iTickSize;
 971
 972         var tickMap = {};
 973
 974         for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
 975             if (!tickMap[i]) {
 976                 this.xTicks[this.xTicks.length] = i;
 977                 tickMap[i] = true;
 978             }
 979         }
 980
 981         for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
 982             if (!tickMap[i]) {
 983                 this.xTicks[this.xTicks.length] = i;
 984                 tickMap[i] = true;
 985             }
 986         }
 987
 988         this.xTicks.sort(this.DDM.numericSort) ;
 989     },
 990
 991     /**
 992      * Create the array of vertical tick marks if an interval was specified in
 993      * setYConstraint().
 994      * @method setYTicks
 995      * @private
 996      */
 997     setYTicks: function(iStartY, iTickSize) {
 998         this.yTicks = [];
 999         this.yTickSize = iTickSize;
1000
1001         var tickMap = {};
1002
1003         for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
1004             if (!tickMap[i]) {
1005                 this.yTicks[this.yTicks.length] = i;
1006                 tickMap[i] = true;
1007             }
1008         }
1009
1010         for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
1011             if (!tickMap[i]) {
1012                 this.yTicks[this.yTicks.length] = i;
1013                 tickMap[i] = true;
1014             }
1015         }
1016
1017         this.yTicks.sort(this.DDM.numericSort) ;
1018     },
1019
1020     /**
1021      * By default, the element can be dragged any place on the screen.  Use
1022      * this method to limit the horizontal travel of the element.  Pass in
1023      * 0,0 for the parameters if you want to lock the drag to the y axis.
1024      * @method setXConstraint
1025      * @param {int} iLeft the number of pixels the element can move to the left
1026      * @param {int} iRight the number of pixels the element can move to the
1027      * right
1028      * @param {int} iTickSize optional parameter for specifying that the
1029      * element
1030      * should move iTickSize pixels at a time.
1031      */
1032     setXConstraint: function(iLeft, iRight, iTickSize) {
1033         this.leftConstraint = iLeft;
1034         this.rightConstraint = iRight;
1035
1036         this.minX = this.initPageX - iLeft;
1037         this.maxX = this.initPageX + iRight;
1038         if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
1039
1040         this.constrainX = true;
1041     },
1042
1043     /**
1044      * Clears any constraints applied to this instance.  Also clears ticks
1045      * since they can't exist independent of a constraint at this time.
1046      * @method clearConstraints
1047      */
1048     clearConstraints: function() {
1049         this.constrainX = false;
1050         this.constrainY = false;
1051         this.clearTicks();
1052     },
1053
1054     /**
1055      * Clears any tick interval defined for this instance
1056      * @method clearTicks
1057      */
1058     clearTicks: function() {
1059         this.xTicks = null;
1060         this.yTicks = null;
1061         this.xTickSize = 0;
1062         this.yTickSize = 0;
1063     },
1064
1065     /**
1066      * By default, the element can be dragged any place on the screen.  Set
1067      * this to limit the vertical travel of the element.  Pass in 0,0 for the
1068      * parameters if you want to lock the drag to the x axis.
1069      * @method setYConstraint
1070      * @param {int} iUp the number of pixels the element can move up
1071      * @param {int} iDown the number of pixels the element can move down
1072      * @param {int} iTickSize optional parameter for specifying that the
1073      * element should move iTickSize pixels at a time.
1074      */
1075     setYConstraint: function(iUp, iDown, iTickSize) {
1076         this.topConstraint = iUp;
1077         this.bottomConstraint = iDown;
1078
1079         this.minY = this.initPageY - iUp;
1080         this.maxY = this.initPageY + iDown;
1081         if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
1082
1083         this.constrainY = true;
1084
1085     },
1086
1087     /**
1088      * resetConstraints must be called if you manually reposition a dd element.
1089      * @method resetConstraints
1090      * @param {boolean} maintainOffset
1091      */
1092     resetConstraints: function() {
1093
1094
1095         // Maintain offsets if necessary
1096         if (this.initPageX || this.initPageX === 0) {
1097             // figure out how much this thing has moved
1098             var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
1099             var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
1100
1101             this.setInitPosition(dx, dy);
1102
1103         // This is the first time we have detected the element's position
1104         } else {
1105             this.setInitPosition();
1106         }
1107
1108         if (this.constrainX) {
1109             this.setXConstraint( this.leftConstraint,
1110                                  this.rightConstraint,
1111                                  this.xTickSize        );
1112         }
1113
1114         if (this.constrainY) {
1115             this.setYConstraint( this.topConstraint,
1116                                  this.bottomConstraint,
1117                                  this.yTickSize         );
1118         }
1119     },
1120
1121     /**
1122      * Normally the drag element is moved pixel by pixel, but we can specify
1123      * that it move a number of pixels at a time.  This method resolves the
1124      * location when we have it set up like this.
1125      * @method getTick
1126      * @param {int} val where we want to place the object
1127      * @param {int[]} tickArray sorted array of valid points
1128      * @return {int} the closest tick
1129      * @private
1130      */
1131     getTick: function(val, tickArray) {
1132
1133         if (!tickArray) {
1134             // If tick interval is not defined, it is effectively 1 pixel,
1135             // so we return the value passed to us.
1136             return val;
1137         } else if (tickArray[0] >= val) {
1138             // The value is lower than the first tick, so we return the first
1139             // tick.
1140             return tickArray[0];
1141         } else {
1142             for (var i=0, len=tickArray.length; i<len; ++i) {
1143                 var next = i + 1;
1144                 if (tickArray[next] && tickArray[next] >= val) {
1145                     var diff1 = val - tickArray[i];
1146                     var diff2 = tickArray[next] - val;
1147                     return (diff2 > diff1) ? tickArray[i] : tickArray[next];
1148                 }
1149             }
1150
1151             // The value is larger than the last tick, so we return the last
1152             // tick.
1153             return tickArray[tickArray.length - 1];
1154         }
1155     },
1156
1157     /**
1158      * toString method
1159      * @method toString
1160      * @return {string} string representation of the dd obj
1161      */
1162     toString: function() {
1163         return ("DragDrop " + this.id);
1164     }
1165
1166 };
1167
1168 })();