DDProxy.html
7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js">/*
* This is a derivative of the similarly named class in the YUI Library.
* The original license:
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
* Code licensed under the BSD License:
* http://developer.yahoo.net/yui/license.txt
*/
<span id='Ext-dd-DDProxy'>/**
</span> * A DragDrop implementation that inserts an empty, bordered div into
* the document that follows the cursor during drag operations. At the time of
* the click, the frame div is resized to the dimensions of the linked html
* element, and moved to the exact location of the linked element.
*
* References to the "frame" element refer to the single proxy element that
* was created to be dragged in place of all DDProxy elements on the
* page.
*/
Ext.define('Ext.dd.DDProxy', {
extend: 'Ext.dd.DD',
statics: {
<span id='Ext-dd-DDProxy-static-property-dragElId'> /**
</span> * The default drag frame div id
* @static
*/
dragElId: "ygddfdiv"
},
<span id='Ext-dd-DDProxy-method-constructor'> /**
</span> * Creates new DDProxy.
* @param {String} id the id of the linked html element
* @param {String} sGroup the group of related DragDrop objects
* @param {Object} config an object containing configurable attributes.
* Valid properties for DDProxy in addition to those in DragDrop:
*
* - resizeFrame
* - centerFrame
* - dragElId
*/
constructor: function(id, sGroup, config) {
if (id) {
this.init(id, sGroup, config);
this.initFrame();
}
},
<span id='Ext-dd-DDProxy-property-resizeFrame'> /**
</span> * @property {Boolean} resizeFrame
* By default we resize the drag frame to be the same size as the element
* we want to drag (this is to get the frame effect). We can turn it off
* if we want a different behavior.
*/
resizeFrame: true,
<span id='Ext-dd-DDProxy-property-centerFrame'> /**
</span> * @property {Boolean} centerFrame
* By default the frame is positioned exactly where the drag element is, so
* we use the cursor offset provided by Ext.dd.DD. Another option that works only if
* you do not have constraints on the obj is to have the drag frame centered
* around the cursor. Set centerFrame to true for this effect.
*/
centerFrame: false,
<span id='Ext-dd-DDProxy-method-createFrame'> /**
</span> * Creates the proxy element if it does not yet exist
*/
createFrame: function() {
var self = this,
body = document.body,
div,
s;
if (!body || !body.firstChild) {
setTimeout( function() { self.createFrame(); }, 50 );
return;
}
div = this.getDragEl();
if (!div) {
div = document.createElement("div");
div.id = this.dragElId;
s = div.style;
s.position = "absolute";
s.visibility = "hidden";
s.cursor = "move";
s.border = "2px solid #aaa";
s.zIndex = 999;
// appendChild can blow up IE if invoked prior to the window load event
// while rendering a table. It is possible there are other scenarios
// that would cause this to happen as well.
body.insertBefore(div, body.firstChild);
}
},
<span id='Ext-dd-DDProxy-method-initFrame'> /**
</span> * Initialization for the drag frame element. Must be called in the
* constructor of all subclasses
*/
initFrame: function() {
this.createFrame();
},
applyConfig: function() {
this.callParent();
this.resizeFrame = (this.config.resizeFrame !== false);
this.centerFrame = (this.config.centerFrame);
this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
},
<span id='Ext-dd-DDProxy-method-showFrame'> /**
</span> * Resizes the drag frame to the dimensions of the clicked object, positions
* it over the object, and finally displays it
* @param {Number} iPageX X click position
* @param {Number} iPageY Y click position
* @private
*/
showFrame: function(iPageX, iPageY) {
var el = this.getEl(),
dragEl = this.getDragEl(),
s = dragEl.style;
this._resizeProxy();
if (this.centerFrame) {
this.setDelta( Math.round(parseInt(s.width, 10)/2),
Math.round(parseInt(s.height, 10)/2) );
}
this.setDragElPos(iPageX, iPageY);
Ext.fly(dragEl).show();
},
<span id='Ext-dd-DDProxy-method-_resizeProxy'> /**
</span> * The proxy is automatically resized to the dimensions of the linked
* element when a drag is initiated, unless resizeFrame is set to false
* @private
*/
_resizeProxy: function() {
if (this.resizeFrame) {
var el = this.getEl();
Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
}
},
// overrides Ext.dd.DragDrop
b4MouseDown: function(e) {
var x = e.getPageX(),
y = e.getPageY();
this.autoOffset(x, y);
this.setDragElPos(x, y);
},
// overrides Ext.dd.DragDrop
b4StartDrag: function(x, y) {
// show the drag frame
this.showFrame(x, y);
},
// overrides Ext.dd.DragDrop
b4EndDrag: function(e) {
Ext.fly(this.getDragEl()).hide();
},
// overrides Ext.dd.DragDrop
// By default we try to move the element to the last location of the frame.
// This is so that the default behavior mirrors that of Ext.dd.DD.
endDrag: function(e) {
var lel = this.getEl(),
del = this.getDragEl();
// Show the drag frame briefly so we can get its position
del.style.visibility = "";
this.beforeMove();
// Hide the linked element before the move to get around a Safari
// rendering bug.
lel.style.visibility = "hidden";
Ext.dd.DDM.moveToEl(lel, del);
del.style.visibility = "hidden";
lel.style.visibility = "";
this.afterDrag();
},
beforeMove : function(){
},
afterDrag : function(){
},
toString: function() {
return ("DDProxy " + this.id);
}
});
</pre>
</body>
</html>