projects / roojs1 / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Fix #5654 - roojspacker - get it working as a doc tool...
[roojs1] / docs.old / symbols / src / Roo_dd_DragDrop.js.html
diff --git a/docs.old/symbols/src/Roo_dd_DragDrop.js.html b/docs.old/symbols/src/Roo_dd_DragDrop.js.html
new file mode 100644 (file)
index 0000000..cc91280
--- /dev/null
+++ b/docs.old/symbols/src/Roo_dd_DragDrop.js.html
@@ -0,0 +1,1180 @@
+<html><head><title>../roojs1/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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+
+
+/*
+ * These classes are derivatives of the similarly named classes in the YUI Library.
+ * The original license:
+ * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
+ * Code licensed under the BSD License:
+ * http://developer.yahoo.net/yui/license.txt
+ */
+
+</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+
+</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">;
+</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">;
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.dd.DragDrop
+ * @extends Roo.util.Observable
+ * Defines the interface and base operation of items that that can be
+ * dragged or can be drop targets.  It was designed to be extended, overriding
+ * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
+ * Up to three html elements can be associated with a DragDrop instance:
+ * &lt;ul&gt;
+ * &lt;li&gt;linked element: the element that is passed into the constructor.
+ * This is the element which defines the boundaries for interaction with
+ * other DragDrop objects.&lt;/li&gt;
+ * &lt;li&gt;handle element(s): The drag operation only occurs if the element that
+ * was clicked matches a handle element.  By default this is the linked
+ * element, but there are times that you will want only a portion of the
+ * linked element to initiate the drag operation, and the setHandleElId()
+ * method provides a way to define this.&lt;/li&gt;
+ * &lt;li&gt;drag element: this represents the element that would be moved along
+ * with the cursor during a drag operation.  By default, this is the linked
+ * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
+ * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
+ * &lt;/li&gt;
+ * &lt;/ul&gt;
+ * This class should not be instantiated until the onload event to ensure that
+ * the associated elements are available.
+ * The following would define a DragDrop obj that would interact with any
+ * other DragDrop obj in the &quot;group1&quot; group:
+ * &lt;pre&gt;
+ *  dd = new Roo.dd.DragDrop(&quot;div1&quot;, &quot;group1&quot;);
+ * &lt;/pre&gt;
+ * Since none of the event handlers have been implemented, nothing would
+ * actually happen if you were to run the code above.  Normally you would
+ * override this class or one of the default implementations, but you can
+ * also override the methods you want on an instance of the class...
+ * &lt;pre&gt;
+ *  dd.onDragDrop = function(e, id) {
+ *  &amp;nbsp;&amp;nbsp;alert(&quot;dd was dropped on &quot; + id);
+ *  }
+ * &lt;/pre&gt;
+ * @constructor
+ * @param {String} id of the element that is linked to this instance
+ * @param {String} sGroup the group of related DragDrop objects
+ * @param {object} config an object containing configurable attributes
+ *                Valid properties for DragDrop:
+ *                    padding, isTarget, maintainOffset, primaryButtonOnly
+ */
+</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">) {
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
+        </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">);
+    }
+    
+};
+
+</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">, {
+
+    </span><span class="jsdoc-comment">/**
+     * The id of the element associated with this object.  This is what we
+     * refer to as the &quot;linked element&quot; because the size and position of
+     * this element is used to determine when the drag and drop objects have
+     * interacted.
+     * @property id
+     * @type String
+     */
+    </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Configuration attributes passed into the constructor
+     * @property config
+     * @type object
+     */
+    </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * The id of the element that will be dragged.  By default this is same
+     * as the linked element , but could be changed to another element. Ex:
+     * Roo.dd.DDProxy
+     * @property dragElId
+     * @type String
+     * @private
+     */
+    </span><span class="jsdoc-var">dragElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * the id of the element that initiates the drag operation.  By default
+     * this is the linked element, but could be changed to be a child of this
+     * element.  This lets us do things like only starting the drag when the
+     * header element within the linked html element is clicked.
+     * @property handleElId
+     * @type String
+     * @private
+     */
+    </span><span class="jsdoc-var">handleElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * An associative array of HTML tags that will be ignored if clicked.
+     * @property invalidHandleTypes
+     * @type {string: string}
+     */
+    </span><span class="jsdoc-var">invalidHandleTypes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * An associative array of ids for elements that will be ignored if clicked
+     * @property invalidHandleIds
+     * @type {string: string}
+     */
+    </span><span class="jsdoc-var">invalidHandleIds</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * An indexted array of css class names for elements that will be ignored
+     * if clicked.
+     * @property invalidHandleClasses
+     * @type string[]
+     */
+    </span><span class="jsdoc-var">invalidHandleClasses</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * The linked element's absolute X position at the time the drag was
+     * started
+     * @property startPageX
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">startPageX</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * The linked element's absolute X position at the time the drag was
+     * started
+     * @property startPageY
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">startPageY</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * The group defines a logical collection of DragDrop objects that are
+     * related.  Instances only get events when interacting with other
+     * DragDrop object in the same group.  This lets us define multiple
+     * groups using a single DragDrop subclass if we want.
+     * @property groups
+     * @type {string: string}
+     */
+    </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Individual drag/drop instances can be locked.  This will prevent
+     * onmousedown start drag.
+     * @property locked
+     * @type boolean
+     * @private
+     */
+    </span><span class="jsdoc-var">locked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Lock this instance
+     * @method lock
+     */
+    </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">; },
+
+    </span><span class="jsdoc-comment">/**
+     * Unlock this instace
+     * @method unlock
+     */
+    </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">; },
+
+    </span><span class="jsdoc-comment">/**
+     * By default, all insances can be a drop target.  This can be disabled by
+     * setting isTarget to false.
+     * @method isTarget
+     * @type boolean
+     */
+    </span><span class="jsdoc-var">isTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * The padding configured for this drag and drop object for calculating
+     * the drop zone intersection with this object.
+     * @method padding
+     * @type int[]
+     */
+    </span><span class="jsdoc-var">padding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Cached reference to the linked element
+     * @property _domRef
+     * @private
+     */
+    </span><span class="jsdoc-var">_domRef</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Internal typeof flag
+     * @property __ygDragDrop
+     * @private
+     */
+    </span><span class="jsdoc-var">__ygDragDrop</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Set to true when horizontal contraints are applied
+     * @property constrainX
+     * @type boolean
+     * @private
+     */
+    </span><span class="jsdoc-var">constrainX</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Set to true when vertical contraints are applied
+     * @property constrainY
+     * @type boolean
+     * @private
+     */
+    </span><span class="jsdoc-var">constrainY</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * The left constraint
+     * @property minX
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * The right constraint
+     * @property maxX
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * The up constraint
+     * @property minY
+     * @type int
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * The down constraint
+     * @property maxY
+     * @type int
+     * @private
+     */
+    </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">: 0,
+
+    </span><span class="jsdoc-comment">/**
+     * Maintain offsets when we resetconstraints.  Set to true when you want
+     * the position of the element relative to its parent to stay the same
+     * when the page changes
+     *
+     * @property maintainOffset
+     * @type boolean
+     */
+    </span><span class="jsdoc-var">maintainOffset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Array of pixel locations the element will snap to if we specified a
+     * horizontal graduation/interval.  This array is generated automatically
+     * when you define a tick interval.
+     * @property xTicks
+     * @type int[]
+     */
+    </span><span class="jsdoc-var">xTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Array of pixel locations the element will snap to if we specified a
+     * vertical graduation/interval.  This array is generated automatically
+     * when you define a tick interval.
+     * @property yTicks
+     * @type int[]
+     */
+    </span><span class="jsdoc-var">yTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * By default the drag and drop instance will only respond to the primary
+     * button click (left button for a right-handed mouse).  Set to true to
+     * allow drag and drop to start with any mouse click that is propogated
+     * by the browser
+     * @property primaryButtonOnly
+     * @type boolean
+     */
+    </span><span class="jsdoc-var">primaryButtonOnly</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * The availabe property is false until the linked dom element is accessible.
+     * @property available
+     * @type boolean
+     */
+    </span><span class="jsdoc-var">available</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * By default, drags can only be initiated if the mousedown occurs in the
+     * region the linked element is.  This is done in part to work around a
+     * bug in some browsers that mis-report the mousedown if the previous
+     * mouseup happened outside of the window.  This property is set to true
+     * if outer handles are defined.
+     *
+     * @property hasOuterHandles
+     * @type boolean
+     * @default false
+     */
+    </span><span class="jsdoc-var">hasOuterHandles</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the startDrag event
+     * @method b4StartDrag
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called after a drag/drop object is clicked
+     * and the drag or mousedown time thresholds have beeen met.
+     * @method startDrag
+     * @param {int} X click location
+     * @param {int} Y click location
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the onDrag event
+     * @method b4Drag
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called during the onMouseMove event while dragging an
+     * object.
+     * @method onDrag
+     * @param {Event} e the mousemove event
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called when this element fist begins hovering over
+     * another DragDrop obj
+     * @method onDragEnter
+     * @param {Event} e the mousemove event
+     * @param {String|DragDrop[]} id In POINT mode, the element
+     * id this is hovering over.  In INTERSECT mode, an array of one or more
+     * dragdrop items being hovered over.
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the onDragOver event
+     * @method b4DragOver
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called when this element is hovering over another
+     * DragDrop obj
+     * @method onDragOver
+     * @param {Event} e the mousemove event
+     * @param {String|DragDrop[]} id In POINT mode, the element
+     * id this is hovering over.  In INTERSECT mode, an array of dd items
+     * being hovered over.
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the onDragOut event
+     * @method b4DragOut
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called when we are no longer hovering over an element
+     * @method onDragOut
+     * @param {Event} e the mousemove event
+     * @param {String|DragDrop[]} id In POINT mode, the element
+     * id this was hovering over.  In INTERSECT mode, an array of dd items
+     * that the mouse is no longer over.
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the onDragDrop event
+     * @method b4DragDrop
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called when this item is dropped on another DragDrop
+     * obj
+     * @method onDragDrop
+     * @param {Event} e the mouseup event
+     * @param {String|DragDrop[]} id In POINT mode, the element
+     * id this was dropped on.  In INTERSECT mode, an array of dd items this
+     * was dropped on.
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Abstract method called when this item is dropped on an area with no
+     * drop target
+     * @method onInvalidDrop
+     * @param {Event} e the mouseup event
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code that executes immediately before the endDrag event
+     * @method b4EndDrag
+     * @private
+     */
+    </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">) { },
+
+    </span><span class="jsdoc-comment">/**
+     * Fired when we are done dragging the object
+     * @method endDrag
+     * @param {Event} e the mouseup event
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Code executed immediately before the onMouseDown event
+     * @method b4MouseDown
+     * @param {Event} e the mousedown event
+     * @private
+     */
+    </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">) {  },
+
+    </span><span class="jsdoc-comment">/**
+     * Event handler that fires when a drag/drop obj gets a mousedown
+     * @method onMouseDown
+     * @param {Event} e the mousedown event
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Event handler that fires when a drag/drop obj gets a mouseup
+     * @method onMouseUp
+     * @param {Event} e the mouseup event
+     */
+    </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">},
+
+    </span><span class="jsdoc-comment">/**
+     * Override the onAvailable method to do what is needed after the initial
+     * position was determined.
+     * @method onAvailable
+     */
+    </span><span class="jsdoc-var">onAvailable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
+    },
+
+    </span><span class="jsdoc-comment">/*
+     * Provides default constraint padding to &quot;constrainTo&quot; elements (defaults to {left: 0, right:0, top:0, bottom:0}).
+     * @type Object
+     */
+    </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},
+
+    </span><span class="jsdoc-comment">/*
+     * Initializes the drag drop object's constraints to restrict movement to a certain element.
+ *
+ * Usage:
+ &lt;pre&gt;&lt;code&gt;
+ var dd = new Roo.dd.DDProxy(&quot;dragDiv1&quot;, &quot;proxytest&quot;,
+                { dragElId: &quot;existingProxyDiv&quot; });
+ dd.startDrag = function(){
+     this.constrainTo(&quot;parent-id&quot;);
+ };
+ &lt;/code&gt;&lt;/pre&gt;
+ * Or you can initalize it using the {@link Roo.Element} object:
+ &lt;pre&gt;&lt;code&gt;
+ Roo.get(&quot;dragDiv1&quot;).initDDProxy(&quot;proxytest&quot;, {dragElId: &quot;existingProxyDiv&quot;}, {
+     startDrag : function(){
+         this.constrainTo(&quot;parent-id&quot;);
+     }
+ });
+ &lt;/code&gt;&lt;/pre&gt;
+     * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
+     * @param {Object/Number} pad (optional) Pad provides a way to specify &quot;padding&quot; of the constraints,
+     * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
+     * an object containing the sides to pad. For example: {right:10, bottom:10}
+     * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
+     */
+    </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">){
+        </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">){
+            </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">};
+        }
+        </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">;
+        </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">();
+        </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">);
+        </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">();
+        </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">;
+        </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">){
+            </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">()};
+        }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ce.getXY</span><span class="jsdoc-syntax">();
+            </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">};
+        }
+
+
+        </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">;
+        </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">;
+
+        </span><span class="jsdoc-var">this.resetConstraints</span><span class="jsdoc-syntax">();
+        </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
+                </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
+        </span><span class="jsdoc-syntax">);
+        </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
+                </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
+        </span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns a reference to the linked element
+     * @method getEl
+     * @return {HTMLElement} the html element
+     */
+    </span><span class="jsdoc-var">getEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this._domRef</span><span class="jsdoc-syntax">) {
+            </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">);
+        }
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this._domRef</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns a reference to the actual element to drag.  By default this is
+     * the same as the html element, but it can be assigned to another
+     * element. An example of this can be found in Roo.dd.DDProxy
+     * @method getDragEl
+     * @return {HTMLElement} the html element
+     */
+    </span><span class="jsdoc-var">getDragEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </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">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets up the DragDrop object.  Must be called in the constructor of any
+     * Roo.dd.DragDrop subclass
+     * @method init
+     * @param id the id of the linked element
+     * @param {String} sGroup the group of related items
+     * @param {object} config configuration attributes
+     */
+    </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">) {
+        </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">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
+            </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">);
+        }
+        </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">);
+        </span><span class="jsdoc-comment">// Event.on(this.id, &quot;selectstart&quot;, Event.preventDefault);
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-comment">/**
+     * Initializes Targeting functionality only... the object does not
+     * get a mousedown handler.
+     * @method initTarget
+     * @param id the id of the linked element
+     * @param {String} sGroup the group of related items
+     * @param {object} config configuration attributes
+     */
+    </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">) {
+
+        </span><span class="jsdoc-comment">// configuration attributes
+        </span><span class="jsdoc-var">this.config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
+
+        </span><span class="jsdoc-comment">// create a local reference to the drag and drop manager
+        </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">;
+        </span><span class="jsdoc-comment">// initialize the groups array
+        </span><span class="jsdoc-var">this.groups </span><span class="jsdoc-syntax">= {};
+
+        </span><span class="jsdoc-comment">// assume that we have an element reference instead of an id if the
+        // parameter is not a string
+        </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">) {
+            </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">);
+        }
+
+        </span><span class="jsdoc-comment">// set the id
+        </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-comment">// add to an interaction group
+        </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">);
+
+        </span><span class="jsdoc-comment">// We don't want to register this as the handle with the manager
+        // so we just set the id rather than calling the setter.
+        </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-comment">// the linked element is the element that gets dragged by default
+        </span><span class="jsdoc-var">this.setDragElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-comment">// by default, clicked anchors will not start drag operations.
+        </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">};
+        </span><span class="jsdoc-var">this.invalidHandleIds </span><span class="jsdoc-syntax">= {};
+        </span><span class="jsdoc-var">this.invalidHandleClasses </span><span class="jsdoc-syntax">= [];
+
+        </span><span class="jsdoc-var">this.applyConfig</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.handleOnAvailable</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Applies the configuration parameters that were passed into the constructor.
+     * This is supposed to happen at each level through the inheritance chain.  So
+     * a DDProxy implentation will execute apply config on DDProxy, DD, and
+     * DragDrop in order to get all of the parameters that are available in
+     * each object.
+     * @method applyConfig
+     */
+    </span><span class="jsdoc-var">applyConfig</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+
+        </span><span class="jsdoc-comment">// configurable properties:
+        //    padding, isTarget, maintainOffset, primaryButtonOnly
+        </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];
+        </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">);
+        </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">);
+        </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">);
+
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Executed when the linked element is available
+     * @method handleOnAvailable
+     * @private
+     */
+    </span><span class="jsdoc-var">handleOnAvailable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </span><span class="jsdoc-var">this.available </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.resetConstraints</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.onAvailable</span><span class="jsdoc-syntax">();
+    },
+
+     </span><span class="jsdoc-comment">/**
+     * Configures the padding for the target zone in px.  Effectively expands
+     * (or reduces) the virtual object size for targeting calculations.
+     * Supports css-style shorthand; if only one parameter is passed, all sides
+     * will have that padding, and if only two are passed, the top and bottom
+     * will have the first param, the left and right the second.
+     * @method setPadding
+     * @param {int} iTop    Top pad
+     * @param {int} iRight  Right pad
+     * @param {int} iBot    Bot pad
+     * @param {int} iLeft   Left pad
+     */
+    </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">) {
+        </span><span class="jsdoc-comment">// this.padding = [iLeft, iRight, iTop, iBot];
+        </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">) {
+            </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">];
+        } </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">) {
+            </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">];
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </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">];
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Stores the initial placement of the linked element.
+     * @method setInitialPosition
+     * @param {int} diffX   the X offset, default 0
+     * @param {int} diffY   the Y offset, default 0
+     */
+    </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">) {
+        </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">();
+
+        </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">)) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </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;
+        </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;
+
+        </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">);
+
+        </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">;
+        </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">;
+
+        </span><span class="jsdoc-var">this.lastPageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[0];
+        </span><span class="jsdoc-var">this.lastPageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[1];
+
+
+        </span><span class="jsdoc-var">this.setStartPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Sets the start position of the element.  This is set when the obj
+     * is initialized, the reset when a drag is started.
+     * @method setStartPosition
+     * @param pos current position (from previous lookup)
+     * @private
+     */
+    </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">) {
+        </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">() );
+        </span><span class="jsdoc-var">this.deltaSetXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.startPageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[0];
+        </span><span class="jsdoc-var">this.startPageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[1];
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Add this instance to a group of related drag/drop objects.  All
+     * instances belong to at least one group, and can belong to as many
+     * groups as needed.
+     * @method addToGroup
+     * @param sGroup {string} the name of the group
+     */
+    </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">) {
+        </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">;
+        </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">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Remove's this instance from the supplied interaction group
+     * @method removeFromGroup
+     * @param {string}  sGroup  The group to drop
+     */
+    </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">) {
+        </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">]) {
+            </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">];
+        }
+
+        </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">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Allows you to specify that an element other than the linked element
+     * will be moved with the cursor during a drag
+     * @method setDragElId
+     * @param id {string} the id of the element that will be used to initiate the drag
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.dragElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Allows you to specify a child of the linked element that should be
+     * used to initiate the drag operation.  An example of this would be if
+     * you have a content div with text and links.  Clicking anywhere in the
+     * content area would normally start the drag operation.  Use this method
+     * to specify that an element inside of the content div is the element
+     * that starts the drag operation.
+     * @method setHandleElId
+     * @param id {string} the id of the element that will be used to
+     * initiate the drag.
+     */
+    </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">) {
+        </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">) {
+            </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">);
+        }
+        </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
+        </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">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Allows you to set an element outside of the linked element as a drag
+     * handle
+     * @method setOuterHandleElId
+     * @param id the id of the element that will be used to initiate the drag
+     */
+    </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">) {
+        </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">) {
+            </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">);
+        }
+        </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">,
+                </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.setHandleElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.hasOuterHandles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Remove all drag and drop hooks for this element
+     * @method unreg
+     */
+    </span><span class="jsdoc-var">unreg</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </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">,
+                </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">);
+        </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">,
+                </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this._domRef </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.DDM._remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">this.unreg</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Returns true if this instance is locked, or the drag drop mgr is locked
+     * (meaning that all drag/drop is disabled on the page.)
+     * @method isLocked
+     * @return {boolean} true if this obj or all drag/drop is locked, else
+     * false
+     */
+    </span><span class="jsdoc-var">isLocked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </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">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Fired when this object is clicked
+     * @method handleMouseDown
+     * @param {Event} e
+     * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
+     * @private
+     */
+    </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">){
+     
+        </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) {
+            </span><span class="jsdoc-comment">//Roo.log('not touch/ button !=0');
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </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) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// double touch..
+        </span><span class="jsdoc-syntax">}
+        
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isLocked</span><span class="jsdoc-syntax">()) {
+            </span><span class="jsdoc-comment">//Roo.log('locked');
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </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">);
+</span><span class="jsdoc-comment">//        Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
+        </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">));
+        </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">) )  {
+            </span><span class="jsdoc-comment">//Roo.log('no outer handes or not over target');
+                // do nothing.
+        </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+</span><span class="jsdoc-comment">//            Roo.log('check validator');
+            </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">)) {
+</span><span class="jsdoc-comment">//                Roo.log('validate success');
+                // set the initial element position
+                </span><span class="jsdoc-var">this.setStartPosition</span><span class="jsdoc-syntax">();
+
+
+                </span><span class="jsdoc-var">this.b4MouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+
+                </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">);
+
+                </span><span class="jsdoc-var">this.DDM.stopEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+
+
+            }
+        }
+    },
+
+    </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">) {
+        </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">();
+        </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;
+                    (</span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">||
+                        </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">)) );
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Allows you to specify a tag name that should not start a drag operation
+     * when clicked.  This is designed to facilitate embedding links within a
+     * drag handle that do something other than start the drag.
+     * @method addInvalidHandleType
+     * @param {string} tagName the type of element to exclude
+     */
+    </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">) {
+        </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">();
+        </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">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Lets you to specify an element id for a child of a drag handle
+     * that should not initiate a drag
+     * @method addInvalidHandleId
+     * @param {string} id the element id of the element you wish to ignore
+     */
+    </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">) {
+        </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">) {
+            </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">);
+        }
+        </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">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Lets you specify a css class of elements that will not initiate a drag
+     * @method addInvalidHandleClass
+     * @param {string} cssClass the class of the elements you wish to ignore
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.invalidHandleClasses.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">);
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Unsets an excluded tag name set by addInvalidHandleType
+     * @method removeInvalidHandleType
+     * @param {string} tagName the type of element to unexclude
+     */
+    </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">) {
+        </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">();
+        </span><span class="jsdoc-comment">// this.invalidHandleTypes[type] = null;
+        </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">];
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Unsets an invalid handle id
+     * @method removeInvalidHandleId
+     * @param {string} id the id of the element to re-enable
+     */
+    </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">) {
+        </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">) {
+            </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">);
+        }
+        </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">];
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Unsets an invalid css class
+     * @method removeInvalidHandleClass
+     * @param {string} cssClass the class of the element(s) you wish to
+     * re-enable
+     */
+    </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">) {
+        </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">) {
+            </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">) {
+                </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">];
+            }
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Checks the tag exclusion list to see if this click should be ignored
+     * @method isValidHandleChild
+     * @param {HTMLElement} node the HTMLElement to evaluate
+     * @return {boolean} true if this is a valid tag type, false if not
+     */
+    </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">) {
+
+        </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">;
+        </span><span class="jsdoc-comment">// var n = (node.nodeName == &quot;#text&quot;) ? node.parentNode : node;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nodeName</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">nodeName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.nodeName.toUpperCase</span><span class="jsdoc-syntax">();
+        } </span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">nodeName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.nodeName</span><span class="jsdoc-syntax">;
+        }
+        </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">];
+        </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">];
+
+        </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">) {
+            </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">]);
+        }
+
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Create the array of horizontal tick marks if an interval was specified
+     * in setXConstraint().
+     * @method setXTicks
+     * @private
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.xTicks </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.xTickSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tickMap </span><span class="jsdoc-syntax">= {};
+
+        </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">) {
+            </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">]) {
+                </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">;
+                </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">;
+            }
+        }
+
+        </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">) {
+            </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">]) {
+                </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">;
+                </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">;
+            }
+        }
+
+        </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">) ;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Create the array of vertical tick marks if an interval was specified in
+     * setYConstraint().
+     * @method setYTicks
+     * @private
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.yTicks </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.yTickSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tickMap </span><span class="jsdoc-syntax">= {};
+
+        </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">) {
+            </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">]) {
+                </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">;
+                </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">;
+            }
+        }
+
+        </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">) {
+            </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">]) {
+                </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">;
+                </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">;
+            }
+        }
+
+        </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">) ;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * By default, the element can be dragged any place on the screen.  Use
+     * this method to limit the horizontal travel of the element.  Pass in
+     * 0,0 for the parameters if you want to lock the drag to the y axis.
+     * @method setXConstraint
+     * @param {int} iLeft the number of pixels the element can move to the left
+     * @param {int} iRight the number of pixels the element can move to the
+     * right
+     * @param {int} iTickSize optional parameter for specifying that the
+     * element
+     * should move iTickSize pixels at a time.
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.leftConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.rightConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">;
+
+        </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">;
+        </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">;
+        </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">); }
+
+        </span><span class="jsdoc-var">this.constrainX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Clears any constraints applied to this instance.  Also clears ticks
+     * since they can't exist independent of a constraint at this time.
+     * @method clearConstraints
+     */
+    </span><span class="jsdoc-var">clearConstraints</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </span><span class="jsdoc-var">this.constrainX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.constrainY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.clearTicks</span><span class="jsdoc-syntax">();
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Clears any tick interval defined for this instance
+     * @method clearTicks
+     */
+    </span><span class="jsdoc-var">clearTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </span><span class="jsdoc-var">this.xTicks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.yTicks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.xTickSize </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">this.yTickSize </span><span class="jsdoc-syntax">= 0;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * By default, the element can be dragged any place on the screen.  Set
+     * this to limit the vertical travel of the element.  Pass in 0,0 for the
+     * parameters if you want to lock the drag to the x axis.
+     * @method setYConstraint
+     * @param {int} iUp the number of pixels the element can move up
+     * @param {int} iDown the number of pixels the element can move down
+     * @param {int} iTickSize optional parameter for specifying that the
+     * element should move iTickSize pixels at a time.
+     */
+    </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">) {
+        </span><span class="jsdoc-var">this.topConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iUp</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.bottomConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iDown</span><span class="jsdoc-syntax">;
+
+        </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">;
+        </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">;
+        </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">); }
+
+        </span><span class="jsdoc-var">this.constrainY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * resetConstraints must be called if you manually reposition a dd element.
+     * @method resetConstraints
+     * @param {boolean} maintainOffset
+     */
+    </span><span class="jsdoc-var">resetConstraints</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+
+
+        </span><span class="jsdoc-comment">// Maintain offsets if necessary
+        </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) {
+            </span><span class="jsdoc-comment">// figure out how much this thing has moved
+            </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;
+            </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;
+
+            </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">);
+
+        </span><span class="jsdoc-comment">// This is the first time we have detected the element's position
+        </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.setInitPosition</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainX</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.setXConstraint</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.leftConstraint</span><span class="jsdoc-syntax">,
+                                 </span><span class="jsdoc-var">this.rightConstraint</span><span class="jsdoc-syntax">,
+                                 </span><span class="jsdoc-var">this.xTickSize        </span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainY</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.setYConstraint</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.topConstraint</span><span class="jsdoc-syntax">,
+                                 </span><span class="jsdoc-var">this.bottomConstraint</span><span class="jsdoc-syntax">,
+                                 </span><span class="jsdoc-var">this.yTickSize         </span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Normally the drag element is moved pixel by pixel, but we can specify
+     * that it move a number of pixels at a time.  This method resolves the
+     * location when we have it set up like this.
+     * @method getTick
+     * @param {int} val where we want to place the object
+     * @param {int[]} tickArray sorted array of valid points
+     * @return {int} the closest tick
+     * @private
+     */
+    </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">) {
+
+        </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-comment">// If tick interval is not defined, it is effectively 1 pixel,
+            // so we return the value passed to us.
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">;
+        } </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">) {
+            </span><span class="jsdoc-comment">// The value is lower than the first tick, so we return the first
+            // tick.
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[0];
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </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">) {
+                </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;
+                </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">) {
+                    </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">];
+                    </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">;
+                    </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">];
+                }
+            }
+
+            </span><span class="jsdoc-comment">// The value is larger than the last tick, so we return the last
+            // tick.
+            </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];
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * toString method
+     * @method toString
+     * @return {string} string representation of the dd obj
+     */
+    </span><span class="jsdoc-var">toString</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+        </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">);
+    }
+
+});
+
+})();
+</span></code></body></html>
\ No newline at end of file
RooJS - Version 1