/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* A simple class that provides the basic implementation needed to make any element draggable.
|
*/
|
Ext.define('Ext.dd.DragSource', {
|
extend: 'Ext.dd.DDProxy',
|
requires: [
|
'Ext.dd.StatusProxy',
|
'Ext.dd.DragDropManager'
|
],
|
|
/**
|
* @cfg {String} ddGroup
|
* A named drag drop group to which this object belongs. If a group is specified, then this object will only
|
* interact with other drag drop objects in the same group.
|
*/
|
|
/**
|
* @property {Object} dragData
|
* This property contains the data representing the dragged object. This data is set up by the implementation of the
|
* {@link #getDragData} method. It must contain a ddel property, but can contain any other data according to the
|
* application's needs.
|
*/
|
|
/**
|
* @cfg {String} dropAllowed
|
* The CSS class returned to the drag source when drop is allowed.
|
*/
|
dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
|
/**
|
* @cfg {String} dropNotAllowed
|
* The CSS class returned to the drag source when drop is not allowed.
|
*/
|
dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
|
|
/**
|
* @cfg {Boolean} animRepair
|
* If true, animates the proxy element back to the position of the handle element used to trigger the drag.
|
*/
|
animRepair: true,
|
|
/**
|
* @cfg {String} repairHighlightColor
|
* The color to use when visually highlighting the drag source in the afterRepair
|
* method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without
|
* a preceding '#'.
|
*/
|
repairHighlightColor: 'c3daf9',
|
|
/**
|
* Creates new drag-source.
|
* @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
|
* @param {Object} config (optional) Config object.
|
*/
|
constructor: function(el, config) {
|
this.el = Ext.get(el);
|
if(!this.dragData){
|
this.dragData = {};
|
}
|
|
Ext.apply(this, config);
|
|
if(!this.proxy){
|
this.proxy = new Ext.dd.StatusProxy({
|
id: this.el.id + '-drag-status-proxy',
|
animRepair: this.animRepair
|
});
|
}
|
this.callParent([this.el.dom, this.ddGroup || this.group,
|
{dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
|
|
this.dragging = false;
|
},
|
|
/**
|
* 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.DragDropManager.getDDById(id),
|
status;
|
this.cachedTarget = target;
|
if (this.beforeDragEnter(target, e, id) !== false) {
|
if (target.isNotifyTarget) {
|
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
|
* @template
|
*/
|
beforeDragEnter: function(target, e, id) {
|
return true;
|
},
|
|
// @private
|
onDragOver: function(e, id) {
|
var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id),
|
status;
|
if (this.beforeDragOver(target, e, id) !== false) {
|
if(target.isNotifyTarget){
|
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
|
* @template
|
*/
|
beforeDragOver: function(target, e, id) {
|
return true;
|
},
|
|
// @private
|
onDragOut: function(e, id) {
|
var target = this.cachedTarget || Ext.dd.DragDropManager.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
|
* @template
|
*/
|
beforeDragOut: function(target, e, id){
|
return true;
|
},
|
|
// @private
|
onDragDrop: function(e, id){
|
var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
|
if (this.beforeDragDrop(target, e, id) !== false) {
|
if (target.isNotifyTarget) {
|
if (target.notifyDrop(this, e, this.dragData) !== false) { // 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
|
* @template
|
*/
|
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 afterValidDrop
|
*/
|
this.afterValidDrop(target, e, id);
|
}
|
},
|
|
// @private
|
getRepairXY: function(e, data){
|
return this.el.getXY();
|
},
|
|
// @private
|
onInvalidDrop: function(target, e, id) {
|
// This method may be called by the DragDropManager.
|
// To preserve backwards compat, it only passes the event object
|
// Here we correct the arguments.
|
var me = this;
|
|
if (!e) {
|
e = target;
|
target = null;
|
id = e.getTarget().id;
|
}
|
if (me.beforeInvalidDrop(target, e, id) !== false) {
|
if (me.cachedTarget) {
|
if(me.cachedTarget.isNotifyTarget){
|
me.cachedTarget.notifyOut(me, e, me.dragData);
|
}
|
me.cacheTarget = null;
|
}
|
me.proxy.repair(me.getRepairXY(e, me.dragData), me.afterRepair, me);
|
|
if (me.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
|
*/
|
me.afterInvalidDrop(e, id);
|
}
|
}
|
},
|
|
// @private
|
afterRepair: function() {
|
var me = this;
|
if (Ext.enableFx) {
|
me.el.highlight(me.repairHighlightColor);
|
}
|
me.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
|
* @template
|
*/
|
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();
|
this.callParent(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
|
* @template
|
*/
|
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
|
* @method
|
* @template
|
*/
|
onStartDrag: Ext.emptyFn,
|
|
alignElWithMouse: function() {
|
this.proxy.ensureAttachedToBody(true);
|
return this.callParent(arguments);
|
},
|
|
// @private
|
startDrag: function(x, y) {
|
this.proxy.reset();
|
this.proxy.hidden = false;
|
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
|
b4EndDrag: function(e) {
|
},
|
|
// @private
|
endDrag : function(e){
|
this.onEndDrag(this.dragData, e);
|
},
|
|
// @private
|
onEndDrag : function(data, e){
|
},
|
|
// @private
|
autoOffset : function(x, y) {
|
this.setDelta(-12, -20);
|
},
|
|
destroy: function(){
|
this.callParent();
|
Ext.destroy(this.proxy);
|
}
|
});
|
