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 Roo.dd.DDProxy = function(id, sGroup, config) {
33 this.init(id, sGroup, config);
39 * The default drag frame div id
40 * @property Roo.dd.DDProxy.dragElId
44 Roo.dd.DDProxy.dragElId = "ygddfdiv";
46 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
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
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
68 * Creates the proxy element if it does not yet exist
71 createFrame: function() {
73 var body = document.body;
75 if (!body || !body.firstChild) {
76 setTimeout( function() { self.createFrame(); }, 50 );
80 var div = this.getDragEl();
83 div = document.createElement("div");
84 div.id = this.dragElId;
87 s.position = "absolute";
88 s.visibility = "hidden";
90 s.border = "2px solid #aaa";
93 // 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 body.insertBefore(div, body.firstChild);
101 * Initialization for the drag frame element. Must be called in the
102 * constructor of all subclasses
105 initFrame: function() {
109 applyConfig: function() {
110 Roo.dd.DDProxy.superclass.applyConfig.call(this);
112 this.resizeFrame = (this.config.resizeFrame !== false);
113 this.centerFrame = (this.config.centerFrame);
114 this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
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 showFrame: function(iPageX, iPageY) {
126 var el = this.getEl();
127 var dragEl = this.getDragEl();
128 var s = dragEl.style;
132 if (this.centerFrame) {
133 this.setDelta( Math.round(parseInt(s.width, 10)/2),
134 Math.round(parseInt(s.height, 10)/2) );
137 this.setDragElPos(iPageX, iPageY);
139 Roo.fly(dragEl).show();
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 _resizeProxy: function() {
149 if (this.resizeFrame) {
150 var el = this.getEl();
151 Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
155 // overrides Roo.dd.DragDrop
156 b4MouseDown: function(e) {
157 var x = e.getPageX();
158 var y = e.getPageY();
159 this.autoOffset(x, y);
160 this.setDragElPos(x, y);
163 // overrides Roo.dd.DragDrop
164 b4StartDrag: function(x, y) {
165 // show the drag frame
166 this.showFrame(x, y);
169 // overrides Roo.dd.DragDrop
170 b4EndDrag: function(e) {
171 Roo.fly(this.getDragEl()).hide();
174 // 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 endDrag: function(e) {
179 var lel = this.getEl();
180 var del = this.getDragEl();
182 // Show the drag frame briefly so we can get its position
183 del.style.visibility = "";
186 // Hide the linked element before the move to get around a Safari
188 lel.style.visibility = "hidden";
189 Roo.dd.DDM.moveToEl(lel, del);
190 del.style.visibility = "hidden";
191 lel.style.visibility = "";
196 beforeMove : function(){
200 afterDrag : function(){
204 toString: function() {
205 return ("DDProxy " + this.id);