src/dd/DropTarget.js

   1 /**
   2  * @class Ext.dd.DropTarget
   3  * @extends Ext.dd.DDTarget
   4  * A simple class that provides the basic implementation needed to make any element a drop target that can have
   5  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
   6  * @constructor
   7  * @param {Mixed} el The container element
   8  * @param {Object} config
   9  */
  10 Ext.define('Ext.dd.DropTarget', {
  11     extend: 'Ext.dd.DDTarget',
  12     requires: ['Ext.dd.ScrollManager'],
  13
  14     constructor : function(el, config){
  15         this.el = Ext.get(el);
  16
  17         Ext.apply(this, config);
  18
  19         if(this.containerScroll){
  20             Ext.dd.ScrollManager.register(this.el);
  21         }
  22
  23         this.callParent([this.el.dom, this.ddGroup || this.group,
  24               {isTarget: true}]);
  25     },
  26
  27     /**
  28      * @cfg {String} ddGroup
  29      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
  30      * interact with other drag drop objects in the same group (defaults to undefined).
  31      */
  32     /**
  33      * @cfg {String} overClass
  34      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
  35      */
  36     /**
  37      * @cfg {String} dropAllowed
  38      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
  39      */
  40     dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
  41     /**
  42      * @cfg {String} dropNotAllowed
  43      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
  44      */
  45     dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
  46
  47     // private
  48     isTarget : true,
  49
  50     // private
  51     isNotifyTarget : true,
  52
  53     /**
  54      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
  55      * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
  56      * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
  57      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  58      * @param {Event} e The event
  59      * @param {Object} data An object containing arbitrary data supplied by the drag source
  60      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  61      * underlying {@link Ext.dd.StatusProxy} can be updated
  62      */
  63     notifyEnter : function(dd, e, data){
  64         if(this.overClass){
  65             this.el.addCls(this.overClass);
  66         }
  67         return this.dropAllowed;
  68     },
  69
  70     /**
  71      * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
  72      * This method will be called on every mouse movement while the drag source is over the drop target.
  73      * This default implementation simply returns the dropAllowed config value.
  74      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  75      * @param {Event} e The event
  76      * @param {Object} data An object containing arbitrary data supplied by the drag source
  77      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  78      * underlying {@link Ext.dd.StatusProxy} can be updated
  79      */
  80     notifyOver : function(dd, e, data){
  81         return this.dropAllowed;
  82     },
  83
  84     /**
  85      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
  86      * out of the target without dropping.  This default implementation simply removes the CSS class specified by
  87      * overClass (if any) from the drop element.
  88      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  89      * @param {Event} e The event
  90      * @param {Object} data An object containing arbitrary data supplied by the drag source
  91      */
  92     notifyOut : function(dd, e, data){
  93         if(this.overClass){
  94             this.el.removeCls(this.overClass);
  95         }
  96     },
  97
  98     /**
  99      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
 100      * been dropped on it.  This method has no default implementation and returns false, so you must provide an
 101      * implementation that does something to process the drop event and returns true so that the drag source's
 102      * repair action does not run.
 103      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
 104      * @param {Event} e The event
 105      * @param {Object} data An object containing arbitrary data supplied by the drag source
 106      * @return {Boolean} False if the drop was invalid.
 107      */
 108     notifyDrop : function(dd, e, data){
 109         return false;
 110     },
 111
 112     destroy : function(){
 113         this.callParent();
 114         if(this.containerScroll){
 115             Ext.dd.ScrollManager.unregister(this.el);
 116         }
 117     }
 118 });