/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. * * Originally Released Under LGPL - original licence link has changed is not relivant. * * Fork - LGPL * <script type="text/javascript"> */ /** * @class Roo.dd.DragSource * @extends Roo.dd.DDProxy * A simple class that provides the basic implementation needed to make any element draggable. * @constructor * @param {String/HTMLElement/Element} el The container element * @param {Object} config */ Roo.dd.DragSource = function(el, config){ this.el = Roo.get(el); this.dragData = {}; Roo.apply(this, config); if(!this.proxy){ this.proxy = new Roo.dd.StatusProxy(); } Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}); this.dragging = false; }; Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, { /** * @cfg {String} dropAllowed * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok"). */ dropAllowed : "x-dd-drop-ok", /** * @cfg {String} dropNotAllowed * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop"). */ dropNotAllowed : "x-dd-drop-nodrop", /** * Returns the data object associated with this drag source * @return {Object} data An object containing arbitrary data */ getDragData : function(e){ return this.dragData; }, // private onDragEnter : function(e, id){ var target = Roo.dd.DragDropMgr.getDDById(id); this.cachedTarget = target; if(this.beforeDragEnter(target, e, id) !== false){ if(target.isNotifyTarget){ var status = target.notifyEnter(this, e, this.dragData); this.proxy.setStatus(status); }else{ this.proxy.setStatus(this.dropAllowed); } if(this.afterDragEnter){ /** * An empty function by default, but provided so that you can perform a custom action * when the dragged item enters the drop target by providing an implementation. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @method afterDragEnter */ this.afterDragEnter(target, e, id); } } }, /** * An empty function by default, but provided so that you can perform a custom action * before the dragged item enters the drop target and optionally cancel the onDragEnter. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @return {Boolean} isValid True if the drag event is valid, else false to cancel */ beforeDragEnter : function(target, e, id){ return true; }, // private alignElWithMouse: function() { Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments); this.proxy.sync(); }, // private onDragOver : function(e, id){ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id); if(this.beforeDragOver(target, e, id) !== false){ if(target.isNotifyTarget){ var status = target.notifyOver(this, e, this.dragData); this.proxy.setStatus(status); } if(this.afterDragOver){ /** * An empty function by default, but provided so that you can perform a custom action * while the dragged item is over the drop target by providing an implementation. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @method afterDragOver */ this.afterDragOver(target, e, id); } } }, /** * An empty function by default, but provided so that you can perform a custom action * while the dragged item is over the drop target and optionally cancel the onDragOver. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @return {Boolean} isValid True if the drag event is valid, else false to cancel */ beforeDragOver : function(target, e, id){ return true; }, // private onDragOut : function(e, id){ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id); if(this.beforeDragOut(target, e, id) !== false){ if(target.isNotifyTarget){ target.notifyOut(this, e, this.dragData); } this.proxy.reset(); if(this.afterDragOut){ /** * An empty function by default, but provided so that you can perform a custom action * after the dragged item is dragged out of the target without dropping. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @method afterDragOut */ this.afterDragOut(target, e, id); } } this.cachedTarget = null; }, /** * An empty function by default, but provided so that you can perform a custom action before the dragged * item is dragged out of the target without dropping, and optionally cancel the onDragOut. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @return {Boolean} isValid True if the drag event is valid, else false to cancel */ beforeDragOut : function(target, e, id){ return true; }, // private onDragDrop : function(e, id){ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id); if(this.beforeDragDrop(target, e, id) !== false){ if(target.isNotifyTarget){ if(target.notifyDrop(this, e, this.dragData)){ // valid drop? this.onValidDrop(target, e, id); }else{ this.onInvalidDrop(target, e, id); } }else{ this.onValidDrop(target, e, id); } if(this.afterDragDrop){ /** * An empty function by default, but provided so that you can perform a custom action * after a valid drag drop has occurred by providing an implementation. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dropped element * @method afterDragDrop */ this.afterDragDrop(target, e, id); } } delete this.cachedTarget; }, /** * An empty function by default, but provided so that you can perform a custom action before the dragged * item is dropped onto the target and optionally cancel the onDragDrop. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel */ beforeDragDrop : function(target, e, id){ return true; }, // private onValidDrop : function(target, e, id){ this.hideProxy(); if(this.afterValidDrop){ /** * An empty function by default, but provided so that you can perform a custom action * after a valid drop has occurred by providing an implementation. * @param {Object} target The target DD * @param {Event} e The event object * @param {String} id The id of the dropped element * @method afterInvalidDrop */ this.afterValidDrop(target, e, id); } }, // private getRepairXY : function(e, data){ return this.el.getXY(); }, // private onInvalidDrop : function(target, e, id){ this.beforeInvalidDrop(target, e, id); if(this.cachedTarget){ if(this.cachedTarget.isNotifyTarget){ this.cachedTarget.notifyOut(this, e, this.dragData); } this.cacheTarget = null; } this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this); if(this.afterInvalidDrop){ /** * An empty function by default, but provided so that you can perform a custom action * after an invalid drop has occurred by providing an implementation. * @param {Event} e The event object * @param {String} id The id of the dropped element * @method afterInvalidDrop */ this.afterInvalidDrop(e, id); } }, // private afterRepair : function(){ if(Roo.enableFx){ this.el.highlight(this.hlColor || "c3daf9"); } this.dragging = false; }, /** * An empty function by default, but provided so that you can perform a custom action after an invalid * drop has occurred. * @param {Roo.dd.DragDrop} target The drop target * @param {Event} e The event object * @param {String} id The id of the dragged element * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel */ beforeInvalidDrop : function(target, e, id){ return true; }, // private handleMouseDown : function(e){ if(this.dragging) { return; } var data = this.getDragData(e); if(data && this.onBeforeDrag(data, e) !== false){ this.dragData = data; this.proxy.stop(); Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments); } }, /** * An empty function by default, but provided so that you can perform a custom action before the initial * drag event begins and optionally cancel it. * @param {Object} data An object containing arbitrary data to be shared with drop targets * @param {Event} e The event object * @return {Boolean} isValid True if the drag event is valid, else false to cancel */ onBeforeDrag : function(data, e){ return true; }, /** * An empty function by default, but provided so that you can perform a custom action once the initial * drag event has begun. The drag cannot be canceled from this function. * @param {Number} x The x position of the click on the dragged object * @param {Number} y The y position of the click on the dragged object */ onStartDrag : Roo.emptyFn, // private - YUI override startDrag : function(x, y){ this.proxy.reset(); this.dragging = true; this.proxy.update(""); this.onInitDrag(x, y); this.proxy.show(); }, // private onInitDrag : function(x, y){ var clone = this.el.dom.cloneNode(true); clone.id = Roo.id(); // prevent duplicate ids this.proxy.update(clone); this.onStartDrag(x, y); return true; }, /** * Returns the drag source's underlying {@link Roo.dd.StatusProxy} * @return {Roo.dd.StatusProxy} proxy The StatusProxy */ getProxy : function(){ return this.proxy; }, /** * Hides the drag source's {@link Roo.dd.StatusProxy} */ hideProxy : function(){ this.proxy.hide(); this.proxy.reset(true); this.dragging = false; }, // private triggerCacheRefresh : function(){ Roo.dd.DDM.refreshCache(this.groups); }, // private - override to prevent hiding b4EndDrag: function(e) { }, // private - override to prevent moving endDrag : function(e){ this.onEndDrag(this.dragData, e); }, // private onEndDrag : function(data, e){ }, // private - pin to cursor autoOffset : function(x, y) { this.setDelta(-12, -20); } });