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