1 <html><head><title>Roo/dd/DDProxy.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">
13 * @class Roo.dd.DDProxy
14 * A DragDrop implementation that inserts an empty, bordered div into
15 * the document that follows the cursor during drag operations. At the time of
16 * the click, the frame div is resized to the dimensions of the linked html
17 * element, and moved to the exact location of the linked element.
19 * References to the "frame" element refer to the single proxy element that
20 * was created to be dragged in place of all DDProxy elements on the
25 * @param {String} id the id of the linked html element
26 * @param {String} sGroup the group of related DragDrop objects
27 * @param {object} config an object containing configurable attributes
28 * Valid properties for DDProxy in addition to those in DragDrop:
29 * resizeFrame, centerFrame, dragElId
31 </span><span class="jsdoc-var">Roo.dd.DDProxy </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">) {
32 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
33 </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">);
34 </span><span class="jsdoc-var">this.initFrame</span><span class="jsdoc-syntax">();
38 </span><span class="jsdoc-comment">/**
39 * The default drag frame div id
40 * @property Roo.dd.DDProxy.dragElId
44 </span><span class="jsdoc-var">Roo.dd.DDProxy.dragElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"ygddfdiv"</span><span class="jsdoc-syntax">;
46 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dd.DDProxy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.dd.DD</span><span class="jsdoc-syntax">, {
48 </span><span class="jsdoc-comment">/**
49 * By default we resize the drag frame to be the same size as the element
50 * we want to drag (this is to get the frame effect). We can turn it off
51 * if we want a different behavior.
52 * @property resizeFrame
55 </span><span class="jsdoc-var">resizeFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
57 </span><span class="jsdoc-comment">/**
58 * By default the frame is positioned exactly where the drag element is, so
59 * we use the cursor offset provided by Roo.dd.DD. Another option that works only if
60 * you do not have constraints on the obj is to have the drag frame centered
61 * around the cursor. Set centerFrame to true for this effect.
62 * @property centerFrame
65 </span><span class="jsdoc-var">centerFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-comment">/**
68 * Creates the proxy element if it does not yet exist
71 </span><span class="jsdoc-var">createFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
72 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">self </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
73 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">;
75 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">body.firstChild</span><span class="jsdoc-syntax">) {
76 </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">self.createFrame</span><span class="jsdoc-syntax">(); }, 50 );
77 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
80 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
82 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">) {
83 </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"div"</span><span class="jsdoc-syntax">);
84 </span><span class="jsdoc-var">div.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dragElId</span><span class="jsdoc-syntax">;
85 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">div.style</span><span class="jsdoc-syntax">;
87 </span><span class="jsdoc-var">s.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"absolute"</span><span class="jsdoc-syntax">;
88 </span><span class="jsdoc-var">s.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">;
89 </span><span class="jsdoc-var">s.cursor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"move"</span><span class="jsdoc-syntax">;
90 </span><span class="jsdoc-var">s.border </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"2px solid #aaa"</span><span class="jsdoc-syntax">;
91 </span><span class="jsdoc-var">s.zIndex </span><span class="jsdoc-syntax">= 999;
93 </span><span class="jsdoc-comment">// appendChild can blow up IE if invoked prior to the window load event
94 // while rendering a table. It is possible there are other scenarios
95 // that would cause this to happen as well.
96 </span><span class="jsdoc-var">body.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">body.firstChild</span><span class="jsdoc-syntax">);
100 </span><span class="jsdoc-comment">/**
101 * Initialization for the drag frame element. Must be called in the
102 * constructor of all subclasses
105 </span><span class="jsdoc-var">initFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
106 </span><span class="jsdoc-var">this.createFrame</span><span class="jsdoc-syntax">();
109 </span><span class="jsdoc-var">applyConfig</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
110 </span><span class="jsdoc-var">Roo.dd.DDProxy.superclass.applyConfig.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
112 </span><span class="jsdoc-var">this.resizeFrame </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.resizeFrame </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
113 </span><span class="jsdoc-var">this.centerFrame </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.centerFrame</span><span class="jsdoc-syntax">);
114 </span><span class="jsdoc-var">this.setDragElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.dragElId </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.dd.DDProxy.dragElId</span><span class="jsdoc-syntax">);
117 </span><span class="jsdoc-comment">/**
118 * Resizes the drag frame to the dimensions of the clicked object, positions
119 * it over the object, and finally displays it
121 * @param {int} iPageX X click position
122 * @param {int} iPageY Y click position
125 </span><span class="jsdoc-var">showFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iPageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iPageY</span><span class="jsdoc-syntax">) {
126 </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">();
127 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
128 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dragEl.style</span><span class="jsdoc-syntax">;
130 </span><span class="jsdoc-var">this._resizeProxy</span><span class="jsdoc-syntax">();
132 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.centerFrame</span><span class="jsdoc-syntax">) {
133 </span><span class="jsdoc-var">this.setDelta</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s.width</span><span class="jsdoc-syntax">, 10)/2),
134 </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s.height</span><span class="jsdoc-syntax">, 10)/2) );
137 </span><span class="jsdoc-var">this.setDragElPos</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iPageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iPageY</span><span class="jsdoc-syntax">);
139 </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dragEl</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.show</span><span class="jsdoc-syntax">();
142 </span><span class="jsdoc-comment">/**
143 * The proxy is automatically resized to the dimensions of the linked
144 * element when a drag is initiated, unless resizeFrame is set to false
145 * @method _resizeProxy
148 </span><span class="jsdoc-var">_resizeProxy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
149 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeFrame</span><span class="jsdoc-syntax">) {
150 </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">();
151 </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.offsetWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">);
155 </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
156 </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">) {
157 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
158 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
159 </span><span class="jsdoc-var">this.autoOffset</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">);
160 </span><span class="jsdoc-var">this.setDragElPos</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">);
163 </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
164 </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">) {
165 </span><span class="jsdoc-comment">// show the drag frame
166 </span><span class="jsdoc-var">this.showFrame</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">);
169 </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
170 </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">) {
171 </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.hide</span><span class="jsdoc-syntax">();
174 </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
175 // By default we try to move the element to the last location of the frame.
176 // This is so that the default behavior mirrors that of Roo.dd.DD.
177 </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">) {
179 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
180 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">del </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
182 </span><span class="jsdoc-comment">// Show the drag frame briefly so we can get its position
183 </span><span class="jsdoc-var">del.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">;
185 </span><span class="jsdoc-var">this.beforeMove</span><span class="jsdoc-syntax">();
186 </span><span class="jsdoc-comment">// Hide the linked element before the move to get around a Safari
188 </span><span class="jsdoc-var">lel.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">;
189 </span><span class="jsdoc-var">Roo.dd.DDM.moveToEl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">del</span><span class="jsdoc-syntax">);
190 </span><span class="jsdoc-var">del.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">;
191 </span><span class="jsdoc-var">lel.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">;
193 </span><span class="jsdoc-var">this.afterDrag</span><span class="jsdoc-syntax">();
196 </span><span class="jsdoc-var">beforeMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
200 </span><span class="jsdoc-var">afterDrag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
204 </span><span class="jsdoc-var">toString</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
205 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"DDProxy " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
209 </span></code></body></html>