/ext-4.1.0_b3/docs/source/DragSource.html
HTML | 410 lines | 370 code | 40 blank | 0 comment | 0 complexity | f4a1982c93acf527f46cd4b98e171580 MD5 | raw file
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
10 </style>
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14 }
15 </script>
16</head>
17<body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-dd-DragSource'>/**
19</span> * A simple class that provides the basic implementation needed to make any element draggable.
20 */
21Ext.define('Ext.dd.DragSource', {
22 extend: 'Ext.dd.DDProxy',
23 requires: [
24 'Ext.dd.StatusProxy',
25 'Ext.dd.DragDropManager'
26 ],
27
28<span id='Ext-dd-DragSource-cfg-ddGroup'> /**
29</span> * @cfg {String} ddGroup
30 * A named drag drop group to which this object belongs. If a group is specified, then this object will only
31 * interact with other drag drop objects in the same group.
32 */
33
34<span id='Ext-dd-DragSource-cfg-dropAllowed'> /**
35</span> * @cfg {String} dropAllowed
36 * The CSS class returned to the drag source when drop is allowed.
37 */
38 dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
39<span id='Ext-dd-DragSource-cfg-dropNotAllowed'> /**
40</span> * @cfg {String} dropNotAllowed
41 * The CSS class returned to the drag source when drop is not allowed.
42 */
43 dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
44
45<span id='Ext-dd-DragSource-cfg-animRepair'> /**
46</span> * @cfg {Boolean} animRepair
47 * If true, animates the proxy element back to the position of the handle element used to trigger the drag.
48 */
49 animRepair: true,
50
51<span id='Ext-dd-DragSource-cfg-repairHighlightColor'> /**
52</span> * @cfg {String} repairHighlightColor
53 * The color to use when visually highlighting the drag source in the afterRepair
54 * method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without
55 * a preceding '#'.
56 */
57 repairHighlightColor: 'c3daf9',
58
59<span id='Ext-dd-DragSource-method-constructor'> /**
60</span> * Creates new drag-source.
61 * @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
62 * @param {Object} config (optional) Config object.
63 */
64 constructor: function(el, config) {
65 this.el = Ext.get(el);
66 if(!this.dragData){
67 this.dragData = {};
68 }
69
70 Ext.apply(this, config);
71
72 if(!this.proxy){
73 this.proxy = new Ext.dd.StatusProxy({
74 id: this.el.id + '-drag-status-proxy',
75 animRepair: this.animRepair
76 });
77 }
78 this.callParent([this.el.dom, this.ddGroup || this.group,
79 {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
80
81 this.dragging = false;
82 },
83
84<span id='Ext-dd-DragSource-method-getDragData'> /**
85</span> * Returns the data object associated with this drag source
86 * @return {Object} data An object containing arbitrary data
87 */
88 getDragData : function(e){
89 return this.dragData;
90 },
91
92 // private
93 onDragEnter : function(e, id){
94 var target = Ext.dd.DragDropManager.getDDById(id);
95 this.cachedTarget = target;
96 if (this.beforeDragEnter(target, e, id) !== false) {
97 if (target.isNotifyTarget) {
98 var status = target.notifyEnter(this, e, this.dragData);
99 this.proxy.setStatus(status);
100 } else {
101 this.proxy.setStatus(this.dropAllowed);
102 }
103
104 if (this.afterDragEnter) {
105<span id='Ext-dd-DragSource-method-afterDragEnter'> /**
106</span> * An empty function by default, but provided so that you can perform a custom action
107 * when the dragged item enters the drop target by providing an implementation.
108 * @param {Ext.dd.DragDrop} target The drop target
109 * @param {Event} e The event object
110 * @param {String} id The id of the dragged element
111 * @method afterDragEnter
112 */
113 this.afterDragEnter(target, e, id);
114 }
115 }
116 },
117
118<span id='Ext-dd-DragSource-method-beforeDragEnter'> /**
119</span> * An empty function by default, but provided so that you can perform a custom action
120 * before the dragged item enters the drop target and optionally cancel the onDragEnter.
121 * @param {Ext.dd.DragDrop} target The drop target
122 * @param {Event} e The event object
123 * @param {String} id The id of the dragged element
124 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
125 */
126 beforeDragEnter: function(target, e, id) {
127 return true;
128 },
129
130 // private
131 onDragOver: function(e, id) {
132 var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
133 if (this.beforeDragOver(target, e, id) !== false) {
134 if(target.isNotifyTarget){
135 var status = target.notifyOver(this, e, this.dragData);
136 this.proxy.setStatus(status);
137 }
138
139 if (this.afterDragOver) {
140<span id='Ext-dd-DragSource-method-afterDragOver'> /**
141</span> * An empty function by default, but provided so that you can perform a custom action
142 * while the dragged item is over the drop target by providing an implementation.
143 * @param {Ext.dd.DragDrop} target The drop target
144 * @param {Event} e The event object
145 * @param {String} id The id of the dragged element
146 * @method afterDragOver
147 */
148 this.afterDragOver(target, e, id);
149 }
150 }
151 },
152
153<span id='Ext-dd-DragSource-method-beforeDragOver'> /**
154</span> * An empty function by default, but provided so that you can perform a custom action
155 * while the dragged item is over the drop target and optionally cancel the onDragOver.
156 * @param {Ext.dd.DragDrop} target The drop target
157 * @param {Event} e The event object
158 * @param {String} id The id of the dragged element
159 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
160 */
161 beforeDragOver: function(target, e, id) {
162 return true;
163 },
164
165 // private
166 onDragOut: function(e, id) {
167 var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
168 if (this.beforeDragOut(target, e, id) !== false) {
169 if (target.isNotifyTarget) {
170 target.notifyOut(this, e, this.dragData);
171 }
172 this.proxy.reset();
173 if (this.afterDragOut) {
174<span id='Ext-dd-DragSource-method-afterDragOut'> /**
175</span> * An empty function by default, but provided so that you can perform a custom action
176 * after the dragged item is dragged out of the target without dropping.
177 * @param {Ext.dd.DragDrop} target The drop target
178 * @param {Event} e The event object
179 * @param {String} id The id of the dragged element
180 * @method afterDragOut
181 */
182 this.afterDragOut(target, e, id);
183 }
184 }
185 this.cachedTarget = null;
186 },
187
188<span id='Ext-dd-DragSource-method-beforeDragOut'> /**
189</span> * An empty function by default, but provided so that you can perform a custom action before the dragged
190 * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
191 * @param {Ext.dd.DragDrop} target The drop target
192 * @param {Event} e The event object
193 * @param {String} id The id of the dragged element
194 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
195 */
196 beforeDragOut: function(target, e, id){
197 return true;
198 },
199
200 // private
201 onDragDrop: function(e, id){
202 var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
203 if (this.beforeDragDrop(target, e, id) !== false) {
204 if (target.isNotifyTarget) {
205 if (target.notifyDrop(this, e, this.dragData) !== false) { // valid drop?
206 this.onValidDrop(target, e, id);
207 } else {
208 this.onInvalidDrop(target, e, id);
209 }
210 } else {
211 this.onValidDrop(target, e, id);
212 }
213
214 if (this.afterDragDrop) {
215<span id='Ext-dd-DragSource-method-afterDragDrop'> /**
216</span> * An empty function by default, but provided so that you can perform a custom action
217 * after a valid drag drop has occurred by providing an implementation.
218 * @param {Ext.dd.DragDrop} target The drop target
219 * @param {Event} e The event object
220 * @param {String} id The id of the dropped element
221 * @method afterDragDrop
222 */
223 this.afterDragDrop(target, e, id);
224 }
225 }
226 delete this.cachedTarget;
227 },
228
229<span id='Ext-dd-DragSource-method-beforeDragDrop'> /**
230</span> * An empty function by default, but provided so that you can perform a custom action before the dragged
231 * item is dropped onto the target and optionally cancel the onDragDrop.
232 * @param {Ext.dd.DragDrop} target The drop target
233 * @param {Event} e The event object
234 * @param {String} id The id of the dragged element
235 * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
236 */
237 beforeDragDrop: function(target, e, id){
238 return true;
239 },
240
241 // private
242 onValidDrop: function(target, e, id){
243 this.hideProxy();
244 if(this.afterValidDrop){
245<span id='Ext-dd-DragSource-method-afterValidDrop'> /**
246</span> * An empty function by default, but provided so that you can perform a custom action
247 * after a valid drop has occurred by providing an implementation.
248 * @param {Object} target The target DD
249 * @param {Event} e The event object
250 * @param {String} id The id of the dropped element
251 * @method afterValidDrop
252 */
253 this.afterValidDrop(target, e, id);
254 }
255 },
256
257 // private
258 getRepairXY: function(e, data){
259 return this.el.getXY();
260 },
261
262 // private
263 onInvalidDrop: function(target, e, id) {
264 this.beforeInvalidDrop(target, e, id);
265 if (this.cachedTarget) {
266 if(this.cachedTarget.isNotifyTarget){
267 this.cachedTarget.notifyOut(this, e, this.dragData);
268 }
269 this.cacheTarget = null;
270 }
271 this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
272
273 if (this.afterInvalidDrop) {
274<span id='Ext-dd-DragSource-method-afterInvalidDrop'> /**
275</span> * An empty function by default, but provided so that you can perform a custom action
276 * after an invalid drop has occurred by providing an implementation.
277 * @param {Event} e The event object
278 * @param {String} id The id of the dropped element
279 * @method afterInvalidDrop
280 */
281 this.afterInvalidDrop(e, id);
282 }
283 },
284
285 // private
286 afterRepair: function() {
287 var me = this;
288 if (Ext.enableFx) {
289 me.el.highlight(me.repairHighlightColor);
290 }
291 me.dragging = false;
292 },
293
294<span id='Ext-dd-DragSource-method-beforeInvalidDrop'> /**
295</span> * An empty function by default, but provided so that you can perform a custom action after an invalid
296 * drop has occurred.
297 * @param {Ext.dd.DragDrop} target The drop target
298 * @param {Event} e The event object
299 * @param {String} id The id of the dragged element
300 * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
301 */
302 beforeInvalidDrop: function(target, e, id) {
303 return true;
304 },
305
306 // private
307 handleMouseDown: function(e) {
308 if (this.dragging) {
309 return;
310 }
311 var data = this.getDragData(e);
312 if (data && this.onBeforeDrag(data, e) !== false) {
313 this.dragData = data;
314 this.proxy.stop();
315 this.callParent(arguments);
316 }
317 },
318
319<span id='Ext-dd-DragSource-method-onBeforeDrag'> /**
320</span> * An empty function by default, but provided so that you can perform a custom action before the initial
321 * drag event begins and optionally cancel it.
322 * @param {Object} data An object containing arbitrary data to be shared with drop targets
323 * @param {Event} e The event object
324 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
325 */
326 onBeforeDrag: function(data, e){
327 return true;
328 },
329
330<span id='Ext-dd-DragSource-method-onStartDrag'> /**
331</span> * An empty function by default, but provided so that you can perform a custom action once the initial
332 * drag event has begun. The drag cannot be canceled from this function.
333 * @param {Number} x The x position of the click on the dragged object
334 * @param {Number} y The y position of the click on the dragged object
335 * @method
336 */
337 onStartDrag: Ext.emptyFn,
338
339 alignElWithMouse: function() {
340 this.proxy.ensureAttachedToBody(true);
341 return this.callParent(arguments);
342 },
343
344 // private override
345 startDrag: function(x, y) {
346 this.proxy.reset();
347 this.proxy.hidden = false;
348 this.dragging = true;
349 this.proxy.update("");
350 this.onInitDrag(x, y);
351 this.proxy.show();
352 },
353
354 // private
355 onInitDrag: function(x, y) {
356 var clone = this.el.dom.cloneNode(true);
357 clone.id = Ext.id(); // prevent duplicate ids
358 this.proxy.update(clone);
359 this.onStartDrag(x, y);
360 return true;
361 },
362
363<span id='Ext-dd-DragSource-method-getProxy'> /**
364</span> * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
365 * @return {Ext.dd.StatusProxy} proxy The StatusProxy
366 */
367 getProxy: function() {
368 return this.proxy;
369 },
370
371<span id='Ext-dd-DragSource-method-hideProxy'> /**
372</span> * Hides the drag source's {@link Ext.dd.StatusProxy}
373 */
374 hideProxy: function() {
375 this.proxy.hide();
376 this.proxy.reset(true);
377 this.dragging = false;
378 },
379
380 // private
381 triggerCacheRefresh: function() {
382 Ext.dd.DDM.refreshCache(this.groups);
383 },
384
385 // private - override to prevent hiding
386 b4EndDrag: function(e) {
387 },
388
389 // private - override to prevent moving
390 endDrag : function(e){
391 this.onEndDrag(this.dragData, e);
392 },
393
394 // private
395 onEndDrag : function(data, e){
396 },
397
398 // private - pin to cursor
399 autoOffset : function(x, y) {
400 this.setDelta(-12, -20);
401 },
402
403 destroy: function(){
404 this.callParent();
405 Ext.destroy(this.proxy);
406 }
407});
408</pre>
409</body>
410</html>