git.roojs.org Git - roojs1/blob - docs/src/Roo_dd_DropZone.js.html

   1 <html><head><title>Roo/dd/DropZone.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">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11 /**
  12  * @class Roo.dd.DropZone
  13  * @extends Roo.dd.DropTarget
  14  * This class provides a container DD instance that proxies for multiple child node targets.&lt;br /&gt;
  15  * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
  16  * @constructor
  17  * @param {String/HTMLElement/Element} el The container element
  18  * @param {Object} config
  19  */
  20 </span><span class="jsdoc-var">Roo.dd.DropZone </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">){
  21     </span><span class="jsdoc-var">Roo.dd.DropZone.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">);
  22 };
  23
  24 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dd.DropZone</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.dd.DropTarget</span><span class="jsdoc-syntax">, {
  25     </span><span class="jsdoc-comment">/**
  26      * Returns a custom data object associated with the DOM node that is the target of the event.  By default
  27      * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
  28      * provide your own custom lookup.
  29      * @param {Event} e The event
  30      * @return {Object} data The custom data
  31      */
  32     </span><span class="jsdoc-var">getTargetFromEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
  33         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.dd.Registry.getTargetFromEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
  34     },
  35
  36     </span><span class="jsdoc-comment">/**
  37      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
  38      * that it has registered.  This method has no default implementation and should be overridden to provide
  39      * node-specific processing if necessary.
  40      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  41      * {@link #getTargetFromEvent} for this node)
  42      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
  43      * @param {Event} e The event
  44      * @param {Object} data An object containing arbitrary data supplied by the drag source
  45      */
  46     </span><span class="jsdoc-var">onNodeEnter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">){
  47
  48     },
  49
  50     </span><span class="jsdoc-comment">/**
  51      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
  52      * that it has registered.  The default implementation returns this.dropNotAllowed, so it should be
  53      * overridden to provide the proper feedback.
  54      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  55      * {@link #getTargetFromEvent} for this node)
  56      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
  57      * @param {Event} e The event
  58      * @param {Object} data An object containing arbitrary data supplied by the drag source
  59      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  60      * underlying {@link Roo.dd.StatusProxy} can be updated
  61      */
  62     </span><span class="jsdoc-var">onNodeOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">){
  63         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dropAllowed</span><span class="jsdoc-syntax">;
  64     },
  65
  66     </span><span class="jsdoc-comment">/**
  67      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
  68      * the drop node without dropping.  This method has no default implementation and should be overridden to provide
  69      * node-specific processing if necessary.
  70      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  71      * {@link #getTargetFromEvent} for this node)
  72      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
  73      * @param {Event} e The event
  74      * @param {Object} data An object containing arbitrary data supplied by the drag source
  75      */
  76     </span><span class="jsdoc-var">onNodeOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">){
  77
  78     },
  79
  80     </span><span class="jsdoc-comment">/**
  81      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
  82      * the drop node.  The default implementation returns false, so it should be overridden to provide the
  83      * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
  84      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  85      * {@link #getTargetFromEvent} for this node)
  86      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
  87      * @param {Event} e The event
  88      * @param {Object} data An object containing arbitrary data supplied by the drag source
  89      * @return {Boolean} True if the drop was valid, else false
  90      */
  91     </span><span class="jsdoc-var">onNodeDrop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">){
  92         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
  93     },
  94
  95     </span><span class="jsdoc-comment">/**
  96      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
  97      * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
  98      * it should be overridden to provide the proper feedback if necessary.
  99      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
 100      * @param {Event} e The event
 101      * @param {Object} data An object containing arbitrary data supplied by the drag source
 102      * @return {String} status The CSS class that communicates the drop status back to the source so that the
 103      * underlying {@link Roo.dd.StatusProxy} can be updated
 104      */
 105     </span><span class="jsdoc-var">onContainerOver </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">){
 106         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
 107     },
 108
 109     </span><span class="jsdoc-comment">/**
 110      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
 111      * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
 112      * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
 113      * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
 114      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
 115      * @param {Event} e The event
 116      * @param {Object} data An object containing arbitrary data supplied by the drag source
 117      * @return {Boolean} True if the drop was valid, else false
 118      */
 119     </span><span class="jsdoc-var">onContainerDrop </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">){
 120         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 121     },
 122
 123     </span><span class="jsdoc-comment">/**
 124      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
 125      * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
 126      * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
 127      * you should override this method and provide a custom implementation.
 128      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
 129      * @param {Event} e The event
 130      * @param {Object} data An object containing arbitrary data supplied by the drag source
 131      * @return {String} status The CSS class that communicates the drop status back to the source so that the
 132      * underlying {@link Roo.dd.StatusProxy} can be updated
 133      */
 134     </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">){
 135         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
 136     },
 137
 138     </span><span class="jsdoc-comment">/**
 139      * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
 140      * This method will be called on every mouse movement while the drag source is over the drop zone.
 141      * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
 142      * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
 143      * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
 144      * registered node, it will call {@link #onContainerOver}.
 145      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
 146      * @param {Event} e The event
 147      * @param {Object} data An object containing arbitrary data supplied by the drag source
 148      * @return {String} status The CSS class that communicates the drop status back to the source so that the
 149      * underlying {@link Roo.dd.StatusProxy} can be updated
 150      */
 151     </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">){
 152         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getTargetFromEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 153         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// not over valid drop target
 154             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</span><span class="jsdoc-syntax">){
 155                 </span><span class="jsdoc-var">this.onNodeOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</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">);
 156                 </span><span class="jsdoc-var">this.lastOverNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 157             }
 158             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.onContainerOver</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">);
 159         }
 160         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">){
 161             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</span><span class="jsdoc-syntax">){
 162                 </span><span class="jsdoc-var">this.onNodeOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</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">);
 163             }
 164             </span><span class="jsdoc-var">this.onNodeEnter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">);
 165             </span><span class="jsdoc-var">this.lastOverNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
 166         }
 167         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.onNodeOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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     },
 169
 170     </span><span class="jsdoc-comment">/**
 171      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
 172      * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
 173      * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
 174      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
 175      * @param {Event} e The event
 176      * @param {Object} data An object containing arbitrary data supplied by the drag zone
 177      */
 178     </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">){
 179         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</span><span class="jsdoc-syntax">){
 180             </span><span class="jsdoc-var">this.onNodeOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</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">);
 181             </span><span class="jsdoc-var">this.lastOverNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 182         }
 183     },
 184
 185     </span><span class="jsdoc-comment">/**
 186      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
 187      * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
 188      * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
 189      * otherwise it will call {@link #onContainerDrop}.
 190      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
 191      * @param {Event} e The event
 192      * @param {Object} data An object containing arbitrary data supplied by the drag source
 193      * @return {Boolean} True if the drop was valid, else false
 194      */
 195     </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">){
 196         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</span><span class="jsdoc-syntax">){
 197             </span><span class="jsdoc-var">this.onNodeOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastOverNode</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">);
 198             </span><span class="jsdoc-var">this.lastOverNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 199         }
 200         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getTargetFromEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 201         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">?
 202             </span><span class="jsdoc-var">this.onNodeDrop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</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">) :
 203             </span><span class="jsdoc-var">this.onContainerDrop</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">);
 204     },
 205
 206     </span><span class="jsdoc-comment">// private
 207     </span><span class="jsdoc-var">triggerCacheRefresh </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 208         </span><span class="jsdoc-var">Roo.dd.DDM.refreshCache</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">);
 209     }
 210 });</span></code></body></html>