1 <html><head><title>Roo/dd/DragDrop.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 * These classes are derivatives of the similarly named classes in the YUI Library.
16 * The original license:
17 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
18 * Code licensed under the BSD License:
19 * http://developer.yahoo.net/yui/license.txt
22 </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
24 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">Event</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">Roo.EventManager</span><span class="jsdoc-syntax">;
25 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">Dom</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">Roo.lib.Dom</span><span class="jsdoc-syntax">;
27 </span><span class="jsdoc-comment">/**
28 * @class Roo.dd.DragDrop
29 * @extends Roo.util.Observable
30 * Defines the interface and base operation of items that that can be
31 * dragged or can be drop targets. It was designed to be extended, overriding
32 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
33 * Up to three html elements can be associated with a DragDrop instance:
35 * <li>linked element: the element that is passed into the constructor.
36 * This is the element which defines the boundaries for interaction with
37 * other DragDrop objects.</li>
38 * <li>handle element(s): The drag operation only occurs if the element that
39 * was clicked matches a handle element. By default this is the linked
40 * element, but there are times that you will want only a portion of the
41 * linked element to initiate the drag operation, and the setHandleElId()
42 * method provides a way to define this.</li>
43 * <li>drag element: this represents the element that would be moved along
44 * with the cursor during a drag operation. By default, this is the linked
45 * element itself as in {@link Roo.dd.DD}. setDragElId() lets you define
46 * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
49 * This class should not be instantiated until the onload event to ensure that
50 * the associated elements are available.
51 * The following would define a DragDrop obj that would interact with any
52 * other DragDrop obj in the "group1" group:
54 * dd = new Roo.dd.DragDrop("div1", "group1");
56 * Since none of the event handlers have been implemented, nothing would
57 * actually happen if you were to run the code above. Normally you would
58 * override this class or one of the default implementations, but you can
59 * also override the methods you want on an instance of the class...
61 * dd.onDragDrop = function(e, id) {
62 * &nbsp;&nbsp;alert("dd was dropped on " + id);
66 * @param {String} id of the element that is linked to this instance
67 * @param {String} sGroup the group of related DragDrop objects
68 * @param {object} config an object containing configurable attributes
69 * Valid properties for DragDrop:
70 * padding, isTarget, maintainOffset, primaryButtonOnly
72 </span><span class="jsdoc-var">Roo.dd.DragDrop </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
73 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
74 </span><span class="jsdoc-var">this.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
79 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dd.DragDrop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable </span><span class="jsdoc-syntax">, {
81 </span><span class="jsdoc-comment">/**
82 * The id of the element associated with this object. This is what we
83 * refer to as the "linked element" because the size and position of
84 * this element is used to determine when the drag and drop objects have
89 </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
91 </span><span class="jsdoc-comment">/**
92 * Configuration attributes passed into the constructor
96 </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
98 </span><span class="jsdoc-comment">/**
99 * The id of the element that will be dragged. By default this is same
100 * as the linked element , but could be changed to another element. Ex:
106 </span><span class="jsdoc-var">dragElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
108 </span><span class="jsdoc-comment">/**
109 * the id of the element that initiates the drag operation. By default
110 * this is the linked element, but could be changed to be a child of this
111 * element. This lets us do things like only starting the drag when the
112 * header element within the linked html element is clicked.
113 * @property handleElId
117 </span><span class="jsdoc-var">handleElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
119 </span><span class="jsdoc-comment">/**
120 * An associative array of HTML tags that will be ignored if clicked.
121 * @property invalidHandleTypes
122 * @type {string: string}
124 </span><span class="jsdoc-var">invalidHandleTypes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
126 </span><span class="jsdoc-comment">/**
127 * An associative array of ids for elements that will be ignored if clicked
128 * @property invalidHandleIds
129 * @type {string: string}
131 </span><span class="jsdoc-var">invalidHandleIds</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
133 </span><span class="jsdoc-comment">/**
134 * An indexted array of css class names for elements that will be ignored
136 * @property invalidHandleClasses
139 </span><span class="jsdoc-var">invalidHandleClasses</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
141 </span><span class="jsdoc-comment">/**
142 * The linked element's absolute X position at the time the drag was
144 * @property startPageX
148 </span><span class="jsdoc-var">startPageX</span><span class="jsdoc-syntax">: 0,
150 </span><span class="jsdoc-comment">/**
151 * The linked element's absolute X position at the time the drag was
153 * @property startPageY
157 </span><span class="jsdoc-var">startPageY</span><span class="jsdoc-syntax">: 0,
159 </span><span class="jsdoc-comment">/**
160 * The group defines a logical collection of DragDrop objects that are
161 * related. Instances only get events when interacting with other
162 * DragDrop object in the same group. This lets us define multiple
163 * groups using a single DragDrop subclass if we want.
165 * @type {string: string}
167 </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
169 </span><span class="jsdoc-comment">/**
170 * Individual drag/drop instances can be locked. This will prevent
171 * onmousedown start drag.
176 </span><span class="jsdoc-var">locked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
178 </span><span class="jsdoc-comment">/**
182 </span><span class="jsdoc-var">lock</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">this.locked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">; },
184 </span><span class="jsdoc-comment">/**
185 * Unlock this instace
188 </span><span class="jsdoc-var">unlock</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">this.locked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; },
190 </span><span class="jsdoc-comment">/**
191 * By default, all insances can be a drop target. This can be disabled by
192 * setting isTarget to false.
196 </span><span class="jsdoc-var">isTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
198 </span><span class="jsdoc-comment">/**
199 * The padding configured for this drag and drop object for calculating
200 * the drop zone intersection with this object.
204 </span><span class="jsdoc-var">padding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
206 </span><span class="jsdoc-comment">/**
207 * Cached reference to the linked element
211 </span><span class="jsdoc-var">_domRef</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
213 </span><span class="jsdoc-comment">/**
214 * Internal typeof flag
215 * @property __ygDragDrop
218 </span><span class="jsdoc-var">__ygDragDrop</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
220 </span><span class="jsdoc-comment">/**
221 * Set to true when horizontal contraints are applied
222 * @property constrainX
226 </span><span class="jsdoc-var">constrainX</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
228 </span><span class="jsdoc-comment">/**
229 * Set to true when vertical contraints are applied
230 * @property constrainY
234 </span><span class="jsdoc-var">constrainY</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
236 </span><span class="jsdoc-comment">/**
237 * The left constraint
242 </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">: 0,
244 </span><span class="jsdoc-comment">/**
245 * The right constraint
250 </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">: 0,
252 </span><span class="jsdoc-comment">/**
259 </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">: 0,
261 </span><span class="jsdoc-comment">/**
262 * The down constraint
267 </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">: 0,
269 </span><span class="jsdoc-comment">/**
270 * Maintain offsets when we resetconstraints. Set to true when you want
271 * the position of the element relative to its parent to stay the same
272 * when the page changes
274 * @property maintainOffset
277 </span><span class="jsdoc-var">maintainOffset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
279 </span><span class="jsdoc-comment">/**
280 * Array of pixel locations the element will snap to if we specified a
281 * horizontal graduation/interval. This array is generated automatically
282 * when you define a tick interval.
286 </span><span class="jsdoc-var">xTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
288 </span><span class="jsdoc-comment">/**
289 * Array of pixel locations the element will snap to if we specified a
290 * vertical graduation/interval. This array is generated automatically
291 * when you define a tick interval.
295 </span><span class="jsdoc-var">yTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
297 </span><span class="jsdoc-comment">/**
298 * By default the drag and drop instance will only respond to the primary
299 * button click (left button for a right-handed mouse). Set to true to
300 * allow drag and drop to start with any mouse click that is propogated
302 * @property primaryButtonOnly
305 </span><span class="jsdoc-var">primaryButtonOnly</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
307 </span><span class="jsdoc-comment">/**
308 * The availabe property is false until the linked dom element is accessible.
309 * @property available
312 </span><span class="jsdoc-var">available</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
314 </span><span class="jsdoc-comment">/**
315 * By default, drags can only be initiated if the mousedown occurs in the
316 * region the linked element is. This is done in part to work around a
317 * bug in some browsers that mis-report the mousedown if the previous
318 * mouseup happened outside of the window. This property is set to true
319 * if outer handles are defined.
321 * @property hasOuterHandles
325 </span><span class="jsdoc-var">hasOuterHandles</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
327 </span><span class="jsdoc-comment">/**
328 * Code that executes immediately before the startDrag event
329 * @method b4StartDrag
332 </span><span class="jsdoc-var">b4StartDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">) { },
334 </span><span class="jsdoc-comment">/**
335 * Abstract method called after a drag/drop object is clicked
336 * and the drag or mousedown time thresholds have beeen met.
338 * @param {int} X click location
339 * @param {int} Y click location
341 </span><span class="jsdoc-var">startDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
343 </span><span class="jsdoc-comment">/**
344 * Code that executes immediately before the onDrag event
348 </span><span class="jsdoc-var">b4Drag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
350 </span><span class="jsdoc-comment">/**
351 * Abstract method called during the onMouseMove event while dragging an
354 * @param {Event} e the mousemove event
356 </span><span class="jsdoc-var">onDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
358 </span><span class="jsdoc-comment">/**
359 * Abstract method called when this element fist begins hovering over
360 * another DragDrop obj
361 * @method onDragEnter
362 * @param {Event} e the mousemove event
363 * @param {String|DragDrop[]} id In POINT mode, the element
364 * id this is hovering over. In INTERSECT mode, an array of one or more
365 * dragdrop items being hovered over.
367 </span><span class="jsdoc-var">onDragEnter</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
369 </span><span class="jsdoc-comment">/**
370 * Code that executes immediately before the onDragOver event
374 </span><span class="jsdoc-var">b4DragOver</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
376 </span><span class="jsdoc-comment">/**
377 * Abstract method called when this element is hovering over another
380 * @param {Event} e the mousemove event
381 * @param {String|DragDrop[]} id In POINT mode, the element
382 * id this is hovering over. In INTERSECT mode, an array of dd items
383 * being hovered over.
385 </span><span class="jsdoc-var">onDragOver</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
387 </span><span class="jsdoc-comment">/**
388 * Code that executes immediately before the onDragOut event
392 </span><span class="jsdoc-var">b4DragOut</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
394 </span><span class="jsdoc-comment">/**
395 * Abstract method called when we are no longer hovering over an element
397 * @param {Event} e the mousemove event
398 * @param {String|DragDrop[]} id In POINT mode, the element
399 * id this was hovering over. In INTERSECT mode, an array of dd items
400 * that the mouse is no longer over.
402 </span><span class="jsdoc-var">onDragOut</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
404 </span><span class="jsdoc-comment">/**
405 * Code that executes immediately before the onDragDrop event
409 </span><span class="jsdoc-var">b4DragDrop</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
411 </span><span class="jsdoc-comment">/**
412 * Abstract method called when this item is dropped on another DragDrop
415 * @param {Event} e the mouseup event
416 * @param {String|DragDrop[]} id In POINT mode, the element
417 * id this was dropped on. In INTERSECT mode, an array of dd items this
420 </span><span class="jsdoc-var">onDragDrop</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
422 </span><span class="jsdoc-comment">/**
423 * Abstract method called when this item is dropped on an area with no
425 * @method onInvalidDrop
426 * @param {Event} e the mouseup event
428 </span><span class="jsdoc-var">onInvalidDrop</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
430 </span><span class="jsdoc-comment">/**
431 * Code that executes immediately before the endDrag event
435 </span><span class="jsdoc-var">b4EndDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
437 </span><span class="jsdoc-comment">/**
438 * Fired when we are done dragging the object
440 * @param {Event} e the mouseup event
442 </span><span class="jsdoc-var">endDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
444 </span><span class="jsdoc-comment">/**
445 * Code executed immediately before the onMouseDown event
446 * @method b4MouseDown
447 * @param {Event} e the mousedown event
450 </span><span class="jsdoc-var">b4MouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { },
452 </span><span class="jsdoc-comment">/**
453 * Event handler that fires when a drag/drop obj gets a mousedown
454 * @method onMouseDown
455 * @param {Event} e the mousedown event
457 </span><span class="jsdoc-var">onMouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
459 </span><span class="jsdoc-comment">/**
460 * Event handler that fires when a drag/drop obj gets a mouseup
462 * @param {Event} e the mouseup event
464 </span><span class="jsdoc-var">onMouseUp</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">/* override this */ </span><span class="jsdoc-syntax">},
466 </span><span class="jsdoc-comment">/**
467 * Override the onAvailable method to do what is needed after the initial
468 * position was determined.
469 * @method onAvailable
471 </span><span class="jsdoc-var">onAvailable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
474 </span><span class="jsdoc-comment">/*
475 * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
478 </span><span class="jsdoc-var">defaultPadding </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:0},
480 </span><span class="jsdoc-comment">/*
481 * Initializes the drag drop object's constraints to restrict movement to a certain element.
484 <pre><code>
485 var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
486 { dragElId: "existingProxyDiv" });
487 dd.startDrag = function(){
488 this.constrainTo("parent-id");
490 </code></pre>
491 * Or you can initalize it using the {@link Roo.Element} object:
492 <pre><code>
493 Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
494 startDrag : function(){
495 this.constrainTo("parent-id");
498 </code></pre>
499 * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
500 * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
501 * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
502 * an object containing the sides to pad. For example: {right:10, bottom:10}
503 * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
505 </span><span class="jsdoc-var">constrainTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">constrainTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">inContent</span><span class="jsdoc-syntax">){
506 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">pad </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"number"</span><span class="jsdoc-syntax">){
507 </span><span class="jsdoc-var">pad </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">pad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">pad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">pad</span><span class="jsdoc-syntax">};
509 </span><span class="jsdoc-var">pad </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pad </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.defaultPadding</span><span class="jsdoc-syntax">;
510 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.getBox</span><span class="jsdoc-syntax">();
511 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ce </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">constrainTo</span><span class="jsdoc-syntax">);
512 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ce.getScroll</span><span class="jsdoc-syntax">();
513 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ce.dom</span><span class="jsdoc-syntax">;
514 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cd </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">){
515 </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()};
516 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
517 </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ce.getXY</span><span class="jsdoc-syntax">();
518 </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]+</span><span class="jsdoc-var">s.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+</span><span class="jsdoc-var">s.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cd.clientWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cd.clientHeight</span><span class="jsdoc-syntax">};
522 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">topSpace </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">c.y</span><span class="jsdoc-syntax">;
523 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">leftSpace </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">c.x</span><span class="jsdoc-syntax">;
525 </span><span class="jsdoc-var">this.resetConstraints</span><span class="jsdoc-syntax">();
526 </span><span class="jsdoc-var">this.setXConstraint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">leftSpace </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">pad.left</span><span class="jsdoc-syntax">||0), </span><span class="jsdoc-comment">// left
527 </span><span class="jsdoc-var">c.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">leftSpace </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">pad.right</span><span class="jsdoc-syntax">||0) </span><span class="jsdoc-comment">//right
528 </span><span class="jsdoc-syntax">);
529 </span><span class="jsdoc-var">this.setYConstraint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">topSpace </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">pad.top</span><span class="jsdoc-syntax">||0), </span><span class="jsdoc-comment">//top
530 </span><span class="jsdoc-var">c.height </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">topSpace </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">pad.bottom</span><span class="jsdoc-syntax">||0) </span><span class="jsdoc-comment">//bottom
531 </span><span class="jsdoc-syntax">);
534 </span><span class="jsdoc-comment">/**
535 * Returns a reference to the linked element
537 * @return {HTMLElement} the html element
539 </span><span class="jsdoc-var">getEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
540 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this._domRef</span><span class="jsdoc-syntax">) {
541 </span><span class="jsdoc-var">this._domRef </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
544 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this._domRef</span><span class="jsdoc-syntax">;
547 </span><span class="jsdoc-comment">/**
548 * Returns a reference to the actual element to drag. By default this is
549 * the same as the html element, but it can be assigned to another
550 * element. An example of this can be found in Roo.dd.DDProxy
552 * @return {HTMLElement} the html element
554 </span><span class="jsdoc-var">getDragEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
555 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragElId</span><span class="jsdoc-syntax">);
558 </span><span class="jsdoc-comment">/**
559 * Sets up the DragDrop object. Must be called in the constructor of any
560 * Roo.dd.DragDrop subclass
562 * @param id the id of the linked element
563 * @param {String} sGroup the group of related items
564 * @param {object} config configuration attributes
566 </span><span class="jsdoc-var">init</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
567 </span><span class="jsdoc-var">this.initTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
568 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
569 </span><span class="jsdoc-var">Event.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"mousedown"</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">);
571 </span><span class="jsdoc-var">Event.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"touchstart"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
572 </span><span class="jsdoc-comment">// Event.on(this.id, "selectstart", Event.preventDefault);
573 </span><span class="jsdoc-syntax">},
575 </span><span class="jsdoc-comment">/**
576 * Initializes Targeting functionality only... the object does not
577 * get a mousedown handler.
579 * @param id the id of the linked element
580 * @param {String} sGroup the group of related items
581 * @param {object} config configuration attributes
583 </span><span class="jsdoc-var">initTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
585 </span><span class="jsdoc-comment">// configuration attributes
586 </span><span class="jsdoc-var">this.config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
588 </span><span class="jsdoc-comment">// create a local reference to the drag and drop manager
589 </span><span class="jsdoc-var">this.DDM </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dd.DDM</span><span class="jsdoc-syntax">;
590 </span><span class="jsdoc-comment">// initialize the groups array
591 </span><span class="jsdoc-var">this.groups </span><span class="jsdoc-syntax">= {};
593 </span><span class="jsdoc-comment">// assume that we have an element reference instead of an id if the
594 // parameter is not a string
595 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">) {
596 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
599 </span><span class="jsdoc-comment">// set the id
600 </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
602 </span><span class="jsdoc-comment">// add to an interaction group
603 </span><span class="jsdoc-var">this.addToGroup</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">sGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"default"</span><span class="jsdoc-syntax">);
605 </span><span class="jsdoc-comment">// We don't want to register this as the handle with the manager
606 // so we just set the id rather than calling the setter.
607 </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
609 </span><span class="jsdoc-comment">// the linked element is the element that gets dragged by default
610 </span><span class="jsdoc-var">this.setDragElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
612 </span><span class="jsdoc-comment">// by default, clicked anchors will not start drag operations.
613 </span><span class="jsdoc-var">this.invalidHandleTypes </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">A</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"A" </span><span class="jsdoc-syntax">};
614 </span><span class="jsdoc-var">this.invalidHandleIds </span><span class="jsdoc-syntax">= {};
615 </span><span class="jsdoc-var">this.invalidHandleClasses </span><span class="jsdoc-syntax">= [];
617 </span><span class="jsdoc-var">this.applyConfig</span><span class="jsdoc-syntax">();
619 </span><span class="jsdoc-var">this.handleOnAvailable</span><span class="jsdoc-syntax">();
622 </span><span class="jsdoc-comment">/**
623 * Applies the configuration parameters that were passed into the constructor.
624 * This is supposed to happen at each level through the inheritance chain. So
625 * a DDProxy implentation will execute apply config on DDProxy, DD, and
626 * DragDrop in order to get all of the parameters that are available in
628 * @method applyConfig
630 </span><span class="jsdoc-var">applyConfig</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
632 </span><span class="jsdoc-comment">// configurable properties:
633 // padding, isTarget, maintainOffset, primaryButtonOnly
634 </span><span class="jsdoc-var">this.padding </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.config.padding </span><span class="jsdoc-syntax">|| [0, 0, 0, 0];
635 </span><span class="jsdoc-var">this.isTarget </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.isTarget </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
636 </span><span class="jsdoc-var">this.maintainOffset </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.maintainOffset</span><span class="jsdoc-syntax">);
637 </span><span class="jsdoc-var">this.primaryButtonOnly </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.primaryButtonOnly </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
641 </span><span class="jsdoc-comment">/**
642 * Executed when the linked element is available
643 * @method handleOnAvailable
646 </span><span class="jsdoc-var">handleOnAvailable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
647 </span><span class="jsdoc-var">this.available </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
648 </span><span class="jsdoc-var">this.resetConstraints</span><span class="jsdoc-syntax">();
649 </span><span class="jsdoc-var">this.onAvailable</span><span class="jsdoc-syntax">();
652 </span><span class="jsdoc-comment">/**
653 * Configures the padding for the target zone in px. Effectively expands
654 * (or reduces) the virtual object size for targeting calculations.
655 * Supports css-style shorthand; if only one parameter is passed, all sides
656 * will have that padding, and if only two are passed, the top and bottom
657 * will have the first param, the left and right the second.
659 * @param {int} iTop Top pad
660 * @param {int} iRight Right pad
661 * @param {int} iBot Bot pad
662 * @param {int} iLeft Left pad
664 </span><span class="jsdoc-var">setPadding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iBot</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">) {
665 </span><span class="jsdoc-comment">// this.padding = [iLeft, iRight, iTop, iBot];
666 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">iRight </span><span class="jsdoc-syntax">&& 0 !== </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">) {
667 </span><span class="jsdoc-var">this.padding </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">];
668 } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">iBot </span><span class="jsdoc-syntax">&& 0 !== </span><span class="jsdoc-var">iBot</span><span class="jsdoc-syntax">) {
669 </span><span class="jsdoc-var">this.padding </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">];
670 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
671 </span><span class="jsdoc-var">this.padding </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">iTop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iBot</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">];
675 </span><span class="jsdoc-comment">/**
676 * Stores the initial placement of the linked element.
677 * @method setInitialPosition
678 * @param {int} diffX the X offset, default 0
679 * @param {int} diffY the Y offset, default 0
681 </span><span class="jsdoc-var">setInitPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">) {
682 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
684 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.DDM.verifyEl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)) {
685 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
688 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">|| 0;
689 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">diffY </span><span class="jsdoc-syntax">|| 0;
691 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Dom.getXY</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">);
693 </span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">dx</span><span class="jsdoc-syntax">;
694 </span><span class="jsdoc-var">this.initPageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">dy</span><span class="jsdoc-syntax">;
696 </span><span class="jsdoc-var">this.lastPageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[0];
697 </span><span class="jsdoc-var">this.lastPageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[1];
700 </span><span class="jsdoc-var">this.setStartPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">);
703 </span><span class="jsdoc-comment">/**
704 * Sets the start position of the element. This is set when the obj
705 * is initialized, the reset when a drag is started.
706 * @method setStartPosition
707 * @param pos current position (from previous lookup)
710 </span><span class="jsdoc-var">setStartPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">) {
711 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Dom.getXY</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">() );
712 </span><span class="jsdoc-var">this.deltaSetXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
714 </span><span class="jsdoc-var">this.startPageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[0];
715 </span><span class="jsdoc-var">this.startPageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[1];
718 </span><span class="jsdoc-comment">/**
719 * Add this instance to a group of related drag/drop objects. All
720 * instances belong to at least one group, and can belong to as many
723 * @param sGroup {string} the name of the group
725 </span><span class="jsdoc-var">addToGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">) {
726 </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
727 </span><span class="jsdoc-var">this.DDM.regDragDrop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">);
730 </span><span class="jsdoc-comment">/**
731 * Remove's this instance from the supplied interaction group
732 * @method removeFromGroup
733 * @param {string} sGroup The group to drop
735 </span><span class="jsdoc-var">removeFromGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">) {
736 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">]) {
737 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">];
740 </span><span class="jsdoc-var">this.DDM.removeDDFromGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">);
743 </span><span class="jsdoc-comment">/**
744 * Allows you to specify that an element other than the linked element
745 * will be moved with the cursor during a drag
746 * @method setDragElId
747 * @param id {string} the id of the element that will be used to initiate the drag
749 </span><span class="jsdoc-var">setDragElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
750 </span><span class="jsdoc-var">this.dragElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
753 </span><span class="jsdoc-comment">/**
754 * Allows you to specify a child of the linked element that should be
755 * used to initiate the drag operation. An example of this would be if
756 * you have a content div with text and links. Clicking anywhere in the
757 * content area would normally start the drag operation. Use this method
758 * to specify that an element inside of the content div is the element
759 * that starts the drag operation.
760 * @method setHandleElId
761 * @param id {string} the id of the element that will be used to
764 </span><span class="jsdoc-var">setHandleElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
765 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">) {
766 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
768 </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
769 </span><span class="jsdoc-var">this.DDM.regHandle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
772 </span><span class="jsdoc-comment">/**
773 * Allows you to set an element outside of the linked element as a drag
775 * @method setOuterHandleElId
776 * @param id the id of the element that will be used to initiate the drag
778 </span><span class="jsdoc-var">setOuterHandleElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
779 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">) {
780 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
782 </span><span class="jsdoc-var">Event.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"mousedown"</span><span class="jsdoc-syntax">,
783 </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
784 </span><span class="jsdoc-var">this.setHandleElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
786 </span><span class="jsdoc-var">this.hasOuterHandles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
789 </span><span class="jsdoc-comment">/**
790 * Remove all drag and drop hooks for this element
793 </span><span class="jsdoc-var">unreg</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
794 </span><span class="jsdoc-var">Event.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"mousedown"</span><span class="jsdoc-syntax">,
795 </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">);
796 </span><span class="jsdoc-var">Event.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"touchstart"</span><span class="jsdoc-syntax">,
797 </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">);
798 </span><span class="jsdoc-var">this._domRef </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
799 </span><span class="jsdoc-var">this.DDM._remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
802 </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
803 </span><span class="jsdoc-var">this.unreg</span><span class="jsdoc-syntax">();
806 </span><span class="jsdoc-comment">/**
807 * Returns true if this instance is locked, or the drag drop mgr is locked
808 * (meaning that all drag/drop is disabled on the page.)
810 * @return {boolean} true if this obj or all drag/drop is locked, else
813 </span><span class="jsdoc-var">isLocked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
814 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.DDM.isLocked</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">this.locked</span><span class="jsdoc-syntax">);
817 </span><span class="jsdoc-comment">/**
818 * Fired when this object is clicked
819 * @method handleMouseDown
821 * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
824 </span><span class="jsdoc-var">handleMouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">oDD</span><span class="jsdoc-syntax">){
826 </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">this.primaryButtonOnly </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">e.button </span><span class="jsdoc-syntax">!= 0) {
827 </span><span class="jsdoc-comment">//Roo.log('not touch/ button !=0');
828 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
830 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.touches </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">e.browserEvent.touches.length </span><span class="jsdoc-syntax">!= 1) {
831 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// double touch..
832 </span><span class="jsdoc-syntax">}
835 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isLocked</span><span class="jsdoc-syntax">()) {
836 </span><span class="jsdoc-comment">//Roo.log('locked');
837 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
840 </span><span class="jsdoc-var">this.DDM.refreshCache</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">);
841 </span><span class="jsdoc-comment">// Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
842 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.lib.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Event.getPageX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">Roo.lib.Event.getPageY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">));
843 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasOuterHandles </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">this.DDM.isOverTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) ) {
844 </span><span class="jsdoc-comment">//Roo.log('no outer handes or not over target');
846 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
847 </span><span class="jsdoc-comment">// Roo.log('check validator');
848 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickValidator</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)) {
849 </span><span class="jsdoc-comment">// Roo.log('validate success');
850 // set the initial element position
851 </span><span class="jsdoc-var">this.setStartPosition</span><span class="jsdoc-syntax">();
854 </span><span class="jsdoc-var">this.b4MouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
855 </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
857 </span><span class="jsdoc-var">this.DDM.handleMouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
859 </span><span class="jsdoc-var">this.DDM.stopEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
860 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
867 </span><span class="jsdoc-var">clickValidator</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
868 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">();
869 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.isValidHandleChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) &&
870 (</span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.handleElId </span><span class="jsdoc-syntax">||
871 </span><span class="jsdoc-var">this.DDM.handleWasClicked</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">)) );
874 </span><span class="jsdoc-comment">/**
875 * Allows you to specify a tag name that should not start a drag operation
876 * when clicked. This is designed to facilitate embedding links within a
877 * drag handle that do something other than start the drag.
878 * @method addInvalidHandleType
879 * @param {string} tagName the type of element to exclude
881 </span><span class="jsdoc-var">addInvalidHandleType</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">) {
882 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName.toUpperCase</span><span class="jsdoc-syntax">();
883 </span><span class="jsdoc-var">this.invalidHandleTypes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">;
886 </span><span class="jsdoc-comment">/**
887 * Lets you to specify an element id for a child of a drag handle
888 * that should not initiate a drag
889 * @method addInvalidHandleId
890 * @param {string} id the element id of the element you wish to ignore
892 </span><span class="jsdoc-var">addInvalidHandleId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
893 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">) {
894 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
896 </span><span class="jsdoc-var">this.invalidHandleIds</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">;
899 </span><span class="jsdoc-comment">/**
900 * Lets you specify a css class of elements that will not initiate a drag
901 * @method addInvalidHandleClass
902 * @param {string} cssClass the class of the elements you wish to ignore
904 </span><span class="jsdoc-var">addInvalidHandleClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">) {
905 </span><span class="jsdoc-var">this.invalidHandleClasses.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">);
908 </span><span class="jsdoc-comment">/**
909 * Unsets an excluded tag name set by addInvalidHandleType
910 * @method removeInvalidHandleType
911 * @param {string} tagName the type of element to unexclude
913 </span><span class="jsdoc-var">removeInvalidHandleType</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tagName</span><span class="jsdoc-syntax">) {
914 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tagName.toUpperCase</span><span class="jsdoc-syntax">();
915 </span><span class="jsdoc-comment">// this.invalidHandleTypes[type] = null;
916 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.invalidHandleTypes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">];
919 </span><span class="jsdoc-comment">/**
920 * Unsets an invalid handle id
921 * @method removeInvalidHandleId
922 * @param {string} id the id of the element to re-enable
924 </span><span class="jsdoc-var">removeInvalidHandleId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
925 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">) {
926 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
928 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.invalidHandleIds</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
931 </span><span class="jsdoc-comment">/**
932 * Unsets an invalid css class
933 * @method removeInvalidHandleClass
934 * @param {string} cssClass the class of the element(s) you wish to
937 </span><span class="jsdoc-var">removeInvalidHandleClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">) {
938 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">this.invalidHandleClasses.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax"><</span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
939 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.invalidHandleClasses</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">) {
940 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.invalidHandleClasses</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
945 </span><span class="jsdoc-comment">/**
946 * Checks the tag exclusion list to see if this click should be ignored
947 * @method isValidHandleChild
948 * @param {HTMLElement} node the HTMLElement to evaluate
949 * @return {boolean} true if this is a valid tag type, false if not
951 </span><span class="jsdoc-var">isValidHandleChild</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">) {
953 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
954 </span><span class="jsdoc-comment">// var n = (node.nodeName == "#text") ? node.parentNode : node;
955 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nodeName</span><span class="jsdoc-syntax">;
956 </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
957 </span><span class="jsdoc-var">nodeName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.nodeName.toUpperCase</span><span class="jsdoc-syntax">();
958 } </span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
959 </span><span class="jsdoc-var">nodeName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.nodeName</span><span class="jsdoc-syntax">;
961 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">this.invalidHandleTypes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">nodeName</span><span class="jsdoc-syntax">];
962 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">this.invalidHandleIds</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">node.id</span><span class="jsdoc-syntax">];
964 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">this.invalidHandleClasses.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax"><</span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
965 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">= !</span><span class="jsdoc-var">Dom.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.invalidHandleClasses</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
969 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">valid</span><span class="jsdoc-syntax">;
973 </span><span class="jsdoc-comment">/**
974 * Create the array of horizontal tick marks if an interval was specified
975 * in setXConstraint().
979 </span><span class="jsdoc-var">setXTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iStartX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
980 </span><span class="jsdoc-var">this.xTicks </span><span class="jsdoc-syntax">= [];
981 </span><span class="jsdoc-var">this.xTickSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">;
983 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tickMap </span><span class="jsdoc-syntax">= {};
985 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageX</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">>= </span><span class="jsdoc-var">this.minX</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
986 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
987 </span><span class="jsdoc-var">this.xTicks</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.xTicks.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
988 </span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
992 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageX</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax"><= </span><span class="jsdoc-var">this.maxX</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
993 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
994 </span><span class="jsdoc-var">this.xTicks</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.xTicks.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
995 </span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
999 </span><span class="jsdoc-var">this.xTicks.sort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.DDM.numericSort</span><span class="jsdoc-syntax">) ;
1002 </span><span class="jsdoc-comment">/**
1003 * Create the array of vertical tick marks if an interval was specified in
1008 </span><span class="jsdoc-var">setYTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iStartY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
1009 </span><span class="jsdoc-var">this.yTicks </span><span class="jsdoc-syntax">= [];
1010 </span><span class="jsdoc-var">this.yTickSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">;
1012 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tickMap </span><span class="jsdoc-syntax">= {};
1014 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageY</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">>= </span><span class="jsdoc-var">this.minY</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
1015 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
1016 </span><span class="jsdoc-var">this.yTicks</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.yTicks.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
1017 </span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
1021 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageY</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax"><= </span><span class="jsdoc-var">this.maxY</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
1022 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
1023 </span><span class="jsdoc-var">this.yTicks</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.yTicks.length</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
1024 </span><span class="jsdoc-var">tickMap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
1028 </span><span class="jsdoc-var">this.yTicks.sort</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.DDM.numericSort</span><span class="jsdoc-syntax">) ;
1031 </span><span class="jsdoc-comment">/**
1032 * By default, the element can be dragged any place on the screen. Use
1033 * this method to limit the horizontal travel of the element. Pass in
1034 * 0,0 for the parameters if you want to lock the drag to the y axis.
1035 * @method setXConstraint
1036 * @param {int} iLeft the number of pixels the element can move to the left
1037 * @param {int} iRight the number of pixels the element can move to the
1039 * @param {int} iTickSize optional parameter for specifying that the
1041 * should move iTickSize pixels at a time.
1043 </span><span class="jsdoc-var">setXConstraint</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
1044 </span><span class="jsdoc-var">this.leftConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">;
1045 </span><span class="jsdoc-var">this.rightConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">;
1047 </span><span class="jsdoc-var">this.minX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">iLeft</span><span class="jsdoc-syntax">;
1048 </span><span class="jsdoc-var">this.maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">iRight</span><span class="jsdoc-syntax">;
1049 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-var">this.setXTicks</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initPageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">); }
1051 </span><span class="jsdoc-var">this.constrainX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
1054 </span><span class="jsdoc-comment">/**
1055 * Clears any constraints applied to this instance. Also clears ticks
1056 * since they can't exist independent of a constraint at this time.
1057 * @method clearConstraints
1059 </span><span class="jsdoc-var">clearConstraints</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
1060 </span><span class="jsdoc-var">this.constrainX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
1061 </span><span class="jsdoc-var">this.constrainY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
1062 </span><span class="jsdoc-var">this.clearTicks</span><span class="jsdoc-syntax">();
1065 </span><span class="jsdoc-comment">/**
1066 * Clears any tick interval defined for this instance
1067 * @method clearTicks
1069 </span><span class="jsdoc-var">clearTicks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
1070 </span><span class="jsdoc-var">this.xTicks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
1071 </span><span class="jsdoc-var">this.yTicks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
1072 </span><span class="jsdoc-var">this.xTickSize </span><span class="jsdoc-syntax">= 0;
1073 </span><span class="jsdoc-var">this.yTickSize </span><span class="jsdoc-syntax">= 0;
1076 </span><span class="jsdoc-comment">/**
1077 * By default, the element can be dragged any place on the screen. Set
1078 * this to limit the vertical travel of the element. Pass in 0,0 for the
1079 * parameters if you want to lock the drag to the x axis.
1080 * @method setYConstraint
1081 * @param {int} iUp the number of pixels the element can move up
1082 * @param {int} iDown the number of pixels the element can move down
1083 * @param {int} iTickSize optional parameter for specifying that the
1084 * element should move iTickSize pixels at a time.
1086 </span><span class="jsdoc-var">setYConstraint</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) {
1087 </span><span class="jsdoc-var">this.topConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iUp</span><span class="jsdoc-syntax">;
1088 </span><span class="jsdoc-var">this.bottomConstraint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">iDown</span><span class="jsdoc-syntax">;
1090 </span><span class="jsdoc-var">this.minY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageY </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">iUp</span><span class="jsdoc-syntax">;
1091 </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initPageY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">iDown</span><span class="jsdoc-syntax">;
1092 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-var">this.setYTicks</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initPageY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iTickSize</span><span class="jsdoc-syntax">); }
1094 </span><span class="jsdoc-var">this.constrainY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
1098 </span><span class="jsdoc-comment">/**
1099 * resetConstraints must be called if you manually reposition a dd element.
1100 * @method resetConstraints
1101 * @param {boolean} maintainOffset
1103 </span><span class="jsdoc-var">resetConstraints</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
1106 </span><span class="jsdoc-comment">// Maintain offsets if necessary
1107 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">=== 0) {
1108 </span><span class="jsdoc-comment">// figure out how much this thing has moved
1109 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.maintainOffset</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.lastPageX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.initPageX </span><span class="jsdoc-syntax">: 0;
1110 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.maintainOffset</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.lastPageY </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.initPageY </span><span class="jsdoc-syntax">: 0;
1112 </span><span class="jsdoc-var">this.setInitPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dy</span><span class="jsdoc-syntax">);
1114 </span><span class="jsdoc-comment">// This is the first time we have detected the element's position
1115 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
1116 </span><span class="jsdoc-var">this.setInitPosition</span><span class="jsdoc-syntax">();
1119 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainX</span><span class="jsdoc-syntax">) {
1120 </span><span class="jsdoc-var">this.setXConstraint</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.leftConstraint</span><span class="jsdoc-syntax">,
1121 </span><span class="jsdoc-var">this.rightConstraint</span><span class="jsdoc-syntax">,
1122 </span><span class="jsdoc-var">this.xTickSize </span><span class="jsdoc-syntax">);
1125 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainY</span><span class="jsdoc-syntax">) {
1126 </span><span class="jsdoc-var">this.setYConstraint</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.topConstraint</span><span class="jsdoc-syntax">,
1127 </span><span class="jsdoc-var">this.bottomConstraint</span><span class="jsdoc-syntax">,
1128 </span><span class="jsdoc-var">this.yTickSize </span><span class="jsdoc-syntax">);
1132 </span><span class="jsdoc-comment">/**
1133 * Normally the drag element is moved pixel by pixel, but we can specify
1134 * that it move a number of pixels at a time. This method resolves the
1135 * location when we have it set up like this.
1137 * @param {int} val where we want to place the object
1138 * @param {int[]} tickArray sorted array of valid points
1139 * @return {int} the closest tick
1142 </span><span class="jsdoc-var">getTick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">) {
1144 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">) {
1145 </span><span class="jsdoc-comment">// If tick interval is not defined, it is effectively 1 pixel,
1146 // so we return the value passed to us.
1147 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">;
1148 } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[0] >= </span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">) {
1149 </span><span class="jsdoc-comment">// The value is lower than the first tick, so we return the first
1151 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[0];
1152 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
1153 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">tickArray.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax"><</span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; ++</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
1154 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">next </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ 1;
1155 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">next</span><span class="jsdoc-syntax">] && </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">) {
1156 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">diff1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">val </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
1157 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">diff2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">next</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">val</span><span class="jsdoc-syntax">;
1158 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">diff2 </span><span class="jsdoc-syntax">> </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">];
1162 </span><span class="jsdoc-comment">// The value is larger than the last tick, so we return the last
1164 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tickArray</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tickArray.length </span><span class="jsdoc-syntax">- 1];
1168 </span><span class="jsdoc-comment">/**
1171 * @return {string} string representation of the dd obj
1173 </span><span class="jsdoc-var">toString</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
1174 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"DragDrop " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
1180 </span></code></body></html>