git.roojs.org Git - roojs1/blob - docs/src/Roo_dd_DragDrop.js.html

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