docs/source/DragDrop.html

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