DragSource.js
/**
* @class Ext.dd.DragSource
* @extends Ext.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
*/
Ext.dd.DragSource = function(el, config){
this.el = Ext.get(el);
this.dragData = {};
Ext.apply(this, config);
if(!this.proxy){
this.proxy = new Ext.dd.StatusProxy();
}
Ext.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;
};
Ext.extend(Ext.dd.DragSource, Ext.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 = Ext.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 {Ext.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 {Ext.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() {
Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
this.proxy.sync();
},
// private
onDragOver : function(e, id){
var target = this.cachedTarget || Ext.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 {Ext.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 {Ext.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 || Ext.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 {Ext.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 {Ext.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 || Ext.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 {Ext.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 {Ext.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(Ext.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 {Ext.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();
Ext.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 : Ext.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 = Ext.id(); // prevent duplicate ids
this.proxy.update(clone);
this.onStartDrag(x, y);
return true;
},
/**
* Returns the drag source's underlying {@link Ext.dd.StatusProxy}
* @return {Ext.dd.StatusProxy} proxy The StatusProxy
*/
getProxy : function(){
return this.proxy;
},
/**
* Hides the drag source's {@link Ext.dd.StatusProxy}
*/
hideProxy : function(){
this.proxy.hide();
this.proxy.reset(true);
this.dragging = false;
},
// private
triggerCacheRefresh : function(){
Ext.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);
}
});
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.