1 <html><head><title>Roo/dd/DropTarget.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.dd.DropTarget
15 * @extends Roo.dd.DDTarget
16 * A simple class that provides the basic implementation needed to make any element a drop target that can have
17 * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
19 * @param {String/HTMLElement/Element} el The container element
20 * @param {Object} config
22 </span><span class="jsdoc-var">Roo.dd.DropTarget </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
23 </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
25 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; ;
26 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">config.listeners</span><span class="jsdoc-syntax">) {
27 </span><span class="jsdoc-var">listeners</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.listeners</span><span class="jsdoc-syntax">;
28 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.listeners</span><span class="jsdoc-syntax">;
30 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
32 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.containerScroll</span><span class="jsdoc-syntax">){
33 </span><span class="jsdoc-var">Roo.dd.ScrollManager.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
35 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">( {
36 </span><span class="jsdoc-comment">/**
37 * @scope Roo.dd.DropTarget
42 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
43 * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
44 * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
46 * IMPORTANT : it should set this.overClass and this.dropAllowed
48 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
49 * @param {Event} e The event
50 * @param {Object} data An object containing arbitrary data supplied by the drag source
52 </span><span class="jsdoc-string">"enter" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
54 </span><span class="jsdoc-comment">/**
56 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
57 * This method will be called on every mouse movement while the drag source is over the drop target.
58 * This default implementation simply returns the dropAllowed config value.
60 * IMPORTANT : it should set this.dropAllowed
62 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
63 * @param {Event} e The event
64 * @param {Object} data An object containing arbitrary data supplied by the drag source
67 </span><span class="jsdoc-string">"over" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
68 </span><span class="jsdoc-comment">/**
70 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
71 * out of the target without dropping. This default implementation simply removes the CSS class specified by
72 * overClass (if any) from the drop element.
74 * @param {Roo.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
78 </span><span class="jsdoc-string">"out" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
80 </span><span class="jsdoc-comment">/**
82 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
83 * been dropped on it. This method has no default implementation and returns false, so you must provide an
84 * implementation that does something to process the drop event and returns true so that the drag source's
85 * repair action does not run.
87 * IMPORTANT : it should set this.success
89 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
90 * @param {Event} e The event
91 * @param {Object} data An object containing arbitrary data supplied by the drag source
93 </span><span class="jsdoc-string">"drop" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
94 </span><span class="jsdoc-syntax">});
97 </span><span class="jsdoc-var">Roo.dd.DropTarget.superclass.constructor.call</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
98 </span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">,
99 </span><span class="jsdoc-var">this.ddGroup </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.group</span><span class="jsdoc-syntax">,
101 </span><span class="jsdoc-var">isTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
102 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">|| {}
110 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dd.DropTarget</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.dd.DDTarget</span><span class="jsdoc-syntax">, {
111 </span><span class="jsdoc-comment">/**
112 * @cfg {String} overClass
113 * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
116 * @cfg {String} ddGroup
117 * The drag drop group to handle drop events for
121 * @cfg {String} dropAllowed
122 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
124 </span><span class="jsdoc-var">dropAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-dd-drop-ok"</span><span class="jsdoc-syntax">,
125 </span><span class="jsdoc-comment">/**
126 * @cfg {String} dropNotAllowed
127 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
129 </span><span class="jsdoc-var">dropNotAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-dd-drop-nodrop"</span><span class="jsdoc-syntax">,
130 </span><span class="jsdoc-comment">/**
131 * @cfg {boolean} success
132 * set this after drop listener..
134 </span><span class="jsdoc-var">success </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
135 </span><span class="jsdoc-comment">/**
136 * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
137 * if the drop point is valid for over/enter..
139 </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
140 </span><span class="jsdoc-comment">// private
141 </span><span class="jsdoc-var">isTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
143 </span><span class="jsdoc-comment">// private
144 </span><span class="jsdoc-var">isNotifyTarget </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
146 </span><span class="jsdoc-comment">/**
149 </span><span class="jsdoc-var">notifyEnter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">)
151 </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
152 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'enter'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
153 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overClass</span><span class="jsdoc-syntax">){
154 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overClass</span><span class="jsdoc-syntax">);
156 </span><span class="jsdoc-keyword">return typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.valid</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'x-dd-drop-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">: (
157 </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dropAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dropNotAllowed
158 </span><span class="jsdoc-syntax">);
161 </span><span class="jsdoc-comment">/**
164 </span><span class="jsdoc-var">notifyOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">)
166 </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
167 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'over'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
168 </span><span class="jsdoc-keyword">return typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.valid</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'x-dd-drop-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">: (
169 </span><span class="jsdoc-var">this.valid </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dropAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dropNotAllowed
170 </span><span class="jsdoc-syntax">);
173 </span><span class="jsdoc-comment">/**
176 </span><span class="jsdoc-var">notifyOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">)
178 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'out'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
179 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overClass</span><span class="jsdoc-syntax">){
180 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overClass</span><span class="jsdoc-syntax">);
184 </span><span class="jsdoc-comment">/**
187 </span><span class="jsdoc-var">notifyDrop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">)
189 </span><span class="jsdoc-var">this.success </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
190 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'drop'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
191 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.success</span><span class="jsdoc-syntax">;
193 });</span></code></body></html>