3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * This is a derivative of the similarly named class in the YUI Library.
17 * The original license:
18 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
19 * Code licensed under the BSD License:
20 * http://developer.yahoo.net/yui/license.txt
24 * @class Ext.dd.DDProxy
26 * A DragDrop implementation that inserts an empty, bordered div into
27 * the document that follows the cursor during drag operations. At the time of
28 * the click, the frame div is resized to the dimensions of the linked html
29 * element, and moved to the exact location of the linked element.
31 * References to the "frame" element refer to the single proxy element that
32 * was created to be dragged in place of all DDProxy elements on the
35 Ext.define('Ext.dd.DDProxy', {
40 * The default drag frame div id
47 * Creates new DDProxy.
48 * @param {String} id the id of the linked html element
49 * @param {String} sGroup the group of related DragDrop objects
50 * @param {Object} config an object containing configurable attributes.
51 * Valid properties for DDProxy in addition to those in DragDrop:
57 constructor: function(id, sGroup, config) {
59 this.init(id, sGroup, config);
65 * By default we resize the drag frame to be the same size as the element
66 * we want to drag (this is to get the frame effect). We can turn it off
67 * if we want a different behavior.
68 * @property resizeFrame
74 * By default the frame is positioned exactly where the drag element is, so
75 * we use the cursor offset provided by Ext.dd.DD. Another option that works only if
76 * you do not have constraints on the obj is to have the drag frame centered
77 * around the cursor. Set centerFrame to true for this effect.
78 * @property centerFrame
84 * Creates the proxy element if it does not yet exist
87 createFrame: function() {
89 var body = document.body;
91 if (!body || !body.firstChild) {
92 setTimeout( function() { self.createFrame(); }, 50 );
96 var div = this.getDragEl();
99 div = document.createElement("div");
100 div.id = this.dragElId;
103 s.position = "absolute";
104 s.visibility = "hidden";
106 s.border = "2px solid #aaa";
109 // appendChild can blow up IE if invoked prior to the window load event
110 // while rendering a table. It is possible there are other scenarios
111 // that would cause this to happen as well.
112 body.insertBefore(div, body.firstChild);
117 * Initialization for the drag frame element. Must be called in the
118 * constructor of all subclasses
121 initFrame: function() {
125 applyConfig: function() {
128 this.resizeFrame = (this.config.resizeFrame !== false);
129 this.centerFrame = (this.config.centerFrame);
130 this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
134 * Resizes the drag frame to the dimensions of the clicked object, positions
135 * it over the object, and finally displays it
137 * @param {Number} iPageX X click position
138 * @param {Number} iPageY Y click position
141 showFrame: function(iPageX, iPageY) {
142 var el = this.getEl();
143 var dragEl = this.getDragEl();
144 var s = dragEl.style;
148 if (this.centerFrame) {
149 this.setDelta( Math.round(parseInt(s.width, 10)/2),
150 Math.round(parseInt(s.height, 10)/2) );
153 this.setDragElPos(iPageX, iPageY);
155 Ext.fly(dragEl).show();
159 * The proxy is automatically resized to the dimensions of the linked
160 * element when a drag is initiated, unless resizeFrame is set to false
161 * @method _resizeProxy
164 _resizeProxy: function() {
165 if (this.resizeFrame) {
166 var el = this.getEl();
167 Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
171 // overrides Ext.dd.DragDrop
172 b4MouseDown: function(e) {
173 var x = e.getPageX();
174 var y = e.getPageY();
175 this.autoOffset(x, y);
176 this.setDragElPos(x, y);
179 // overrides Ext.dd.DragDrop
180 b4StartDrag: function(x, y) {
181 // show the drag frame
182 this.showFrame(x, y);
185 // overrides Ext.dd.DragDrop
186 b4EndDrag: function(e) {
187 Ext.fly(this.getDragEl()).hide();
190 // overrides Ext.dd.DragDrop
191 // By default we try to move the element to the last location of the frame.
192 // This is so that the default behavior mirrors that of Ext.dd.DD.
193 endDrag: function(e) {
195 var lel = this.getEl();
196 var del = this.getDragEl();
198 // Show the drag frame briefly so we can get its position
199 del.style.visibility = "";
202 // Hide the linked element before the move to get around a Safari
204 lel.style.visibility = "hidden";
205 Ext.dd.DDM.moveToEl(lel, del);
206 del.style.visibility = "hidden";
207 lel.style.visibility = "";
212 beforeMove : function(){
216 afterDrag : function(){
220 toString: function() {
221 return ("DDProxy " + this.id);