3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.dd.DragSource
9 * @extends Ext.dd.DDProxy
10 * A simple class that provides the basic implementation needed to make any element draggable.
12 * @param {Mixed} el The container element
13 * @param {Object} config
15 Ext.dd.DragSource = function(el, config){
16 this.el = Ext.get(el);
21 Ext.apply(this, config);
24 this.proxy = new Ext.dd.StatusProxy();
26 Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
27 {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
29 this.dragging = false;
32 Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
34 * @cfg {String} ddGroup
35 * A named drag drop group to which this object belongs. If a group is specified, then this object will only
36 * interact with other drag drop objects in the same group (defaults to undefined).
39 * @cfg {String} dropAllowed
40 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
42 dropAllowed : "x-dd-drop-ok",
44 * @cfg {String} dropNotAllowed
45 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
47 dropNotAllowed : "x-dd-drop-nodrop",
50 * Returns the data object associated with this drag source
51 * @return {Object} data An object containing arbitrary data
53 getDragData : function(e){
58 onDragEnter : function(e, id){
59 var target = Ext.dd.DragDropMgr.getDDById(id);
60 this.cachedTarget = target;
61 if(this.beforeDragEnter(target, e, id) !== false){
62 if(target.isNotifyTarget){
63 var status = target.notifyEnter(this, e, this.dragData);
64 this.proxy.setStatus(status);
66 this.proxy.setStatus(this.dropAllowed);
69 if(this.afterDragEnter){
71 * An empty function by default, but provided so that you can perform a custom action
72 * when the dragged item enters the drop target by providing an implementation.
73 * @param {Ext.dd.DragDrop} target The drop target
74 * @param {Event} e The event object
75 * @param {String} id The id of the dragged element
76 * @method afterDragEnter
78 this.afterDragEnter(target, e, id);
84 * An empty function by default, but provided so that you can perform a custom action
85 * before the dragged item enters the drop target and optionally cancel the onDragEnter.
86 * @param {Ext.dd.DragDrop} target The drop target
87 * @param {Event} e The event object
88 * @param {String} id The id of the dragged element
89 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
91 beforeDragEnter : function(target, e, id){
96 alignElWithMouse: function() {
97 Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
102 onDragOver : function(e, id){
103 var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
104 if(this.beforeDragOver(target, e, id) !== false){
105 if(target.isNotifyTarget){
106 var status = target.notifyOver(this, e, this.dragData);
107 this.proxy.setStatus(status);
110 if(this.afterDragOver){
112 * An empty function by default, but provided so that you can perform a custom action
113 * while the dragged item is over the drop target by providing an implementation.
114 * @param {Ext.dd.DragDrop} target The drop target
115 * @param {Event} e The event object
116 * @param {String} id The id of the dragged element
117 * @method afterDragOver
119 this.afterDragOver(target, e, id);
125 * An empty function by default, but provided so that you can perform a custom action
126 * while the dragged item is over the drop target and optionally cancel the onDragOver.
127 * @param {Ext.dd.DragDrop} target The drop target
128 * @param {Event} e The event object
129 * @param {String} id The id of the dragged element
130 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
132 beforeDragOver : function(target, e, id){
137 onDragOut : function(e, id){
138 var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
139 if(this.beforeDragOut(target, e, id) !== false){
140 if(target.isNotifyTarget){
141 target.notifyOut(this, e, this.dragData);
144 if(this.afterDragOut){
146 * An empty function by default, but provided so that you can perform a custom action
147 * after the dragged item is dragged out of the target without dropping.
148 * @param {Ext.dd.DragDrop} target The drop target
149 * @param {Event} e The event object
150 * @param {String} id The id of the dragged element
151 * @method afterDragOut
153 this.afterDragOut(target, e, id);
156 this.cachedTarget = null;
160 * An empty function by default, but provided so that you can perform a custom action before the dragged
161 * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
162 * @param {Ext.dd.DragDrop} target The drop target
163 * @param {Event} e The event object
164 * @param {String} id The id of the dragged element
165 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
167 beforeDragOut : function(target, e, id){
172 onDragDrop : function(e, id){
173 var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
174 if(this.beforeDragDrop(target, e, id) !== false){
175 if(target.isNotifyTarget){
176 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
177 this.onValidDrop(target, e, id);
179 this.onInvalidDrop(target, e, id);
182 this.onValidDrop(target, e, id);
185 if(this.afterDragDrop){
187 * An empty function by default, but provided so that you can perform a custom action
188 * after a valid drag drop has occurred by providing an implementation.
189 * @param {Ext.dd.DragDrop} target The drop target
190 * @param {Event} e The event object
191 * @param {String} id The id of the dropped element
192 * @method afterDragDrop
194 this.afterDragDrop(target, e, id);
197 delete this.cachedTarget;
201 * An empty function by default, but provided so that you can perform a custom action before the dragged
202 * item is dropped onto the target and optionally cancel the onDragDrop.
203 * @param {Ext.dd.DragDrop} target The drop target
204 * @param {Event} e The event object
205 * @param {String} id The id of the dragged element
206 * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
208 beforeDragDrop : function(target, e, id){
213 onValidDrop : function(target, e, id){
215 if(this.afterValidDrop){
217 * An empty function by default, but provided so that you can perform a custom action
218 * after a valid drop has occurred by providing an implementation.
219 * @param {Object} target The target DD
220 * @param {Event} e The event object
221 * @param {String} id The id of the dropped element
222 * @method afterInvalidDrop
224 this.afterValidDrop(target, e, id);
229 getRepairXY : function(e, data){
230 return this.el.getXY();
234 onInvalidDrop : function(target, e, id){
235 this.beforeInvalidDrop(target, e, id);
236 if(this.cachedTarget){
237 if(this.cachedTarget.isNotifyTarget){
238 this.cachedTarget.notifyOut(this, e, this.dragData);
240 this.cacheTarget = null;
242 this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
244 if(this.afterInvalidDrop){
246 * An empty function by default, but provided so that you can perform a custom action
247 * after an invalid drop has occurred by providing an implementation.
248 * @param {Event} e The event object
249 * @param {String} id The id of the dropped element
250 * @method afterInvalidDrop
252 this.afterInvalidDrop(e, id);
257 afterRepair : function(){
259 this.el.highlight(this.hlColor || "c3daf9");
261 this.dragging = false;
265 * An empty function by default, but provided so that you can perform a custom action after an invalid
267 * @param {Ext.dd.DragDrop} target The drop target
268 * @param {Event} e The event object
269 * @param {String} id The id of the dragged element
270 * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
272 beforeInvalidDrop : function(target, e, id){
277 handleMouseDown : function(e){
281 var data = this.getDragData(e);
282 if(data && this.onBeforeDrag(data, e) !== false){
283 this.dragData = data;
285 Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
290 * An empty function by default, but provided so that you can perform a custom action before the initial
291 * drag event begins and optionally cancel it.
292 * @param {Object} data An object containing arbitrary data to be shared with drop targets
293 * @param {Event} e The event object
294 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
296 onBeforeDrag : function(data, e){
301 * An empty function by default, but provided so that you can perform a custom action once the initial
302 * drag event has begun. The drag cannot be canceled from this function.
303 * @param {Number} x The x position of the click on the dragged object
304 * @param {Number} y The y position of the click on the dragged object
306 onStartDrag : Ext.emptyFn,
309 startDrag : function(x, y){
311 this.dragging = true;
312 this.proxy.update("");
313 this.onInitDrag(x, y);
318 onInitDrag : function(x, y){
319 var clone = this.el.dom.cloneNode(true);
320 clone.id = Ext.id(); // prevent duplicate ids
321 this.proxy.update(clone);
322 this.onStartDrag(x, y);
327 * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
328 * @return {Ext.dd.StatusProxy} proxy The StatusProxy
330 getProxy : function(){
335 * Hides the drag source's {@link Ext.dd.StatusProxy}
337 hideProxy : function(){
339 this.proxy.reset(true);
340 this.dragging = false;
344 triggerCacheRefresh : function(){
345 Ext.dd.DDM.refreshCache(this.groups);
348 // private - override to prevent hiding
349 b4EndDrag: function(e) {
352 // private - override to prevent moving
353 endDrag : function(e){
354 this.onEndDrag(this.dragData, e);
358 onEndDrag : function(data, e){
361 // private - pin to cursor
362 autoOffset : function(x, y) {
363 this.setDelta(-12, -20);
367 Ext.dd.DragSource.superclass.destroy.call(this);
368 Ext.destroy(this.proxy);