Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / DropTarget.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.1
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.dd.DropTarget"></div>/**
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  * @constructor
21  * @param {Mixed} el The container element
22  * @param {Object} config
23  */
24 Ext.dd.DropTarget = function(el, config){
25     this.el = Ext.get(el);
26     
27     Ext.apply(this, config);
28     
29     if(this.containerScroll){
30         Ext.dd.ScrollManager.register(this.el);
31     }
32     
33     Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
34           {isTarget: true});
35
36 };
37
38 Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
39     <div id="cfg-Ext.dd.DropTarget-ddGroup"></div>/**
40      * @cfg {String} ddGroup
41      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
42      * interact with other drag drop objects in the same group (defaults to undefined).
43      */
44     <div id="cfg-Ext.dd.DropTarget-overClass"></div>/**
45      * @cfg {String} overClass
46      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
47      */
48     <div id="cfg-Ext.dd.DropTarget-dropAllowed"></div>/**
49      * @cfg {String} dropAllowed
50      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
51      */
52     dropAllowed : "x-dd-drop-ok",
53     <div id="cfg-Ext.dd.DropTarget-dropNotAllowed"></div>/**
54      * @cfg {String} dropNotAllowed
55      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
56      */
57     dropNotAllowed : "x-dd-drop-nodrop",
58
59     // private
60     isTarget : true,
61
62     // private
63     isNotifyTarget : true,
64
65     <div id="method-Ext.dd.DropTarget-notifyEnter"></div>/**
66      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
67      * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
68      * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
69      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
70      * @param {Event} e The event
71      * @param {Object} data An object containing arbitrary data supplied by the drag source
72      * @return {String} status The CSS class that communicates the drop status back to the source so that the
73      * underlying {@link Ext.dd.StatusProxy} can be updated
74      */
75     notifyEnter : function(dd, e, data){
76         if(this.overClass){
77             this.el.addClass(this.overClass);
78         }
79         return this.dropAllowed;
80     },
81
82     <div id="method-Ext.dd.DropTarget-notifyOver"></div>/**
83      * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
84      * This method will be called on every mouse movement while the drag source is over the drop target.
85      * This default implementation simply returns the dropAllowed config value.
86      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
87      * @param {Event} e The event
88      * @param {Object} data An object containing arbitrary data supplied by the drag source
89      * @return {String} status The CSS class that communicates the drop status back to the source so that the
90      * underlying {@link Ext.dd.StatusProxy} can be updated
91      */
92     notifyOver : function(dd, e, data){
93         return this.dropAllowed;
94     },
95
96     <div id="method-Ext.dd.DropTarget-notifyOut"></div>/**
97      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
98      * out of the target without dropping.  This default implementation simply removes the CSS class specified by
99      * overClass (if any) from the drop element.
100      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
101      * @param {Event} e The event
102      * @param {Object} data An object containing arbitrary data supplied by the drag source
103      */
104     notifyOut : function(dd, e, data){
105         if(this.overClass){
106             this.el.removeClass(this.overClass);
107         }
108     },
109
110     <div id="method-Ext.dd.DropTarget-notifyDrop"></div>/**
111      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
112      * been dropped on it.  This method has no default implementation and returns false, so you must provide an
113      * implementation that does something to process the drop event and returns true so that the drag source's
114      * repair action does not run.
115      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
116      * @param {Event} e The event
117      * @param {Object} data An object containing arbitrary data supplied by the drag source
118      * @return {Boolean} True if the drop was valid, else false
119      */
120     notifyDrop : function(dd, e, data){
121         return false;
122     }
123 });</pre>    
124 </body>
125 </html>