src/dd/DropTarget.js

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