docs/source/DragSource.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.dd.DragSource"></div>/**\r
  15  * @class Ext.dd.DragSource\r
  16  * @extends Ext.dd.DDProxy\r
  17  * A simple class that provides the basic implementation needed to make any element draggable.\r
  18  * @constructor\r
  19  * @param {Mixed} el The container element\r
  20  * @param {Object} config\r
  21  */\r
  22 Ext.dd.DragSource = function(el, config){\r
  23     this.el = Ext.get(el);\r
  24     if(!this.dragData){\r
  25         this.dragData = {};\r
  26     }\r
  27     \r
  28     Ext.apply(this, config);\r
  29     \r
  30     if(!this.proxy){\r
  31         this.proxy = new Ext.dd.StatusProxy();\r
  32     }\r
  33     Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, \r
  34           {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});\r
  35     \r
  36     this.dragging = false;\r
  37 };\r
  38 \r
  39 Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {\r
  40     <div id="cfg-Ext.dd.DragSource-ddGroup"></div>/**\r
  41      * @cfg {String} ddGroup\r
  42      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only\r
  43      * interact with other drag drop objects in the same group (defaults to undefined).\r
  44      */\r
  45     <div id="cfg-Ext.dd.DragSource-dropAllowed"></div>/**\r
  46      * @cfg {String} dropAllowed\r
  47      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").\r
  48      */\r
  49     dropAllowed : "x-dd-drop-ok",\r
  50     <div id="cfg-Ext.dd.DragSource-dropNotAllowed"></div>/**\r
  51      * @cfg {String} dropNotAllowed\r
  52      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").\r
  53      */\r
  54     dropNotAllowed : "x-dd-drop-nodrop",\r
  55 \r
  56     <div id="method-Ext.dd.DragSource-getDragData"></div>/**\r
  57      * Returns the data object associated with this drag source\r
  58      * @return {Object} data An object containing arbitrary data\r
  59      */\r
  60     getDragData : function(e){\r
  61         return this.dragData;\r
  62     },\r
  63 \r
  64     // private\r
  65     onDragEnter : function(e, id){\r
  66         var target = Ext.dd.DragDropMgr.getDDById(id);\r
  67         this.cachedTarget = target;\r
  68         if(this.beforeDragEnter(target, e, id) !== false){\r
  69             if(target.isNotifyTarget){\r
  70                 var status = target.notifyEnter(this, e, this.dragData);\r
  71                 this.proxy.setStatus(status);\r
  72             }else{\r
  73                 this.proxy.setStatus(this.dropAllowed);\r
  74             }\r
  75             \r
  76             if(this.afterDragEnter){\r
  77                 <div id="method-Ext.dd.DragSource-afterDragEnter"></div>/**\r
  78                  * An empty function by default, but provided so that you can perform a custom action\r
  79                  * when the dragged item enters the drop target by providing an implementation.\r
  80                  * @param {Ext.dd.DragDrop} target The drop target\r
  81                  * @param {Event} e The event object\r
  82                  * @param {String} id The id of the dragged element\r
  83                  * @method afterDragEnter\r
  84                  */\r
  85                 this.afterDragEnter(target, e, id);\r
  86             }\r
  87         }\r
  88     },\r
  89 \r
  90     <div id="method-Ext.dd.DragSource-beforeDragEnter"></div>/**\r
  91      * An empty function by default, but provided so that you can perform a custom action\r
  92      * before the dragged item enters the drop target and optionally cancel the onDragEnter.\r
  93      * @param {Ext.dd.DragDrop} target The drop target\r
  94      * @param {Event} e The event object\r
  95      * @param {String} id The id of the dragged element\r
  96      * @return {Boolean} isValid True if the drag event is valid, else false to cancel\r
  97      */\r
  98     beforeDragEnter : function(target, e, id){\r
  99         return true;\r
 100     },\r
 101 \r
 102     // private\r
 103     alignElWithMouse: function() {\r
 104         Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);\r
 105         this.proxy.sync();\r
 106     },\r
 107 \r
 108     // private\r
 109     onDragOver : function(e, id){\r
 110         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);\r
 111         if(this.beforeDragOver(target, e, id) !== false){\r
 112             if(target.isNotifyTarget){\r
 113                 var status = target.notifyOver(this, e, this.dragData);\r
 114                 this.proxy.setStatus(status);\r
 115             }\r
 116 \r
 117             if(this.afterDragOver){\r
 118                 <div id="method-Ext.dd.DragSource-afterDragOver"></div>/**\r
 119                  * An empty function by default, but provided so that you can perform a custom action\r
 120                  * while the dragged item is over the drop target by providing an implementation.\r
 121                  * @param {Ext.dd.DragDrop} target The drop target\r
 122                  * @param {Event} e The event object\r
 123                  * @param {String} id The id of the dragged element\r
 124                  * @method afterDragOver\r
 125                  */\r
 126                 this.afterDragOver(target, e, id);\r
 127             }\r
 128         }\r
 129     },\r
 130 \r
 131     <div id="method-Ext.dd.DragSource-beforeDragOver"></div>/**\r
 132      * An empty function by default, but provided so that you can perform a custom action\r
 133      * while the dragged item is over the drop target and optionally cancel the onDragOver.\r
 134      * @param {Ext.dd.DragDrop} target The drop target\r
 135      * @param {Event} e The event object\r
 136      * @param {String} id The id of the dragged element\r
 137      * @return {Boolean} isValid True if the drag event is valid, else false to cancel\r
 138      */\r
 139     beforeDragOver : function(target, e, id){\r
 140         return true;\r
 141     },\r
 142 \r
 143     // private\r
 144     onDragOut : function(e, id){\r
 145         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);\r
 146         if(this.beforeDragOut(target, e, id) !== false){\r
 147             if(target.isNotifyTarget){\r
 148                 target.notifyOut(this, e, this.dragData);\r
 149             }\r
 150             this.proxy.reset();\r
 151             if(this.afterDragOut){\r
 152                 <div id="method-Ext.dd.DragSource-afterDragOut"></div>/**\r
 153                  * An empty function by default, but provided so that you can perform a custom action\r
 154                  * after the dragged item is dragged out of the target without dropping.\r
 155                  * @param {Ext.dd.DragDrop} target The drop target\r
 156                  * @param {Event} e The event object\r
 157                  * @param {String} id The id of the dragged element\r
 158                  * @method afterDragOut\r
 159                  */\r
 160                 this.afterDragOut(target, e, id);\r
 161             }\r
 162         }\r
 163         this.cachedTarget = null;\r
 164     },\r
 165 \r
 166     <div id="method-Ext.dd.DragSource-beforeDragOut"></div>/**\r
 167      * An empty function by default, but provided so that you can perform a custom action before the dragged\r
 168      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.\r
 169      * @param {Ext.dd.DragDrop} target The drop target\r
 170      * @param {Event} e The event object\r
 171      * @param {String} id The id of the dragged element\r
 172      * @return {Boolean} isValid True if the drag event is valid, else false to cancel\r
 173      */\r
 174     beforeDragOut : function(target, e, id){\r
 175         return true;\r
 176     },\r
 177     \r
 178     // private\r
 179     onDragDrop : function(e, id){\r
 180         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);\r
 181         if(this.beforeDragDrop(target, e, id) !== false){\r
 182             if(target.isNotifyTarget){\r
 183                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?\r
 184                     this.onValidDrop(target, e, id);\r
 185                 }else{\r
 186                     this.onInvalidDrop(target, e, id);\r
 187                 }\r
 188             }else{\r
 189                 this.onValidDrop(target, e, id);\r
 190             }\r
 191             \r
 192             if(this.afterDragDrop){\r
 193                 <div id="method-Ext.dd.DragSource-afterDragDrop"></div>/**\r
 194                  * An empty function by default, but provided so that you can perform a custom action\r
 195                  * after a valid drag drop has occurred by providing an implementation.\r
 196                  * @param {Ext.dd.DragDrop} target The drop target\r
 197                  * @param {Event} e The event object\r
 198                  * @param {String} id The id of the dropped element\r
 199                  * @method afterDragDrop\r
 200                  */\r
 201                 this.afterDragDrop(target, e, id);\r
 202             }\r
 203         }\r
 204         delete this.cachedTarget;\r
 205     },\r
 206 \r
 207     <div id="method-Ext.dd.DragSource-beforeDragDrop"></div>/**\r
 208      * An empty function by default, but provided so that you can perform a custom action before the dragged\r
 209      * item is dropped onto the target and optionally cancel the onDragDrop.\r
 210      * @param {Ext.dd.DragDrop} target The drop target\r
 211      * @param {Event} e The event object\r
 212      * @param {String} id The id of the dragged element\r
 213      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel\r
 214      */\r
 215     beforeDragDrop : function(target, e, id){\r
 216         return true;\r
 217     },\r
 218 \r
 219     // private\r
 220     onValidDrop : function(target, e, id){\r
 221         this.hideProxy();\r
 222         if(this.afterValidDrop){\r
 223             /**\r
 224              * An empty function by default, but provided so that you can perform a custom action\r
 225              * after a valid drop has occurred by providing an implementation.\r
 226              * @param {Object} target The target DD \r
 227              * @param {Event} e The event object\r
 228              * @param {String} id The id of the dropped element\r
 229              * @method afterInvalidDrop\r
 230              */\r
 231             this.afterValidDrop(target, e, id);\r
 232         }\r
 233     },\r
 234 \r
 235     // private\r
 236     getRepairXY : function(e, data){\r
 237         return this.el.getXY();  \r
 238     },\r
 239 \r
 240     // private\r
 241     onInvalidDrop : function(target, e, id){\r
 242         this.beforeInvalidDrop(target, e, id);\r
 243         if(this.cachedTarget){\r
 244             if(this.cachedTarget.isNotifyTarget){\r
 245                 this.cachedTarget.notifyOut(this, e, this.dragData);\r
 246             }\r
 247             this.cacheTarget = null;\r
 248         }\r
 249         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);\r
 250 \r
 251         if(this.afterInvalidDrop){\r
 252             <div id="method-Ext.dd.DragSource-afterInvalidDrop"></div>/**\r
 253              * An empty function by default, but provided so that you can perform a custom action\r
 254              * after an invalid drop has occurred by providing an implementation.\r
 255              * @param {Event} e The event object\r
 256              * @param {String} id The id of the dropped element\r
 257              * @method afterInvalidDrop\r
 258              */\r
 259             this.afterInvalidDrop(e, id);\r
 260         }\r
 261     },\r
 262 \r
 263     // private\r
 264     afterRepair : function(){\r
 265         if(Ext.enableFx){\r
 266             this.el.highlight(this.hlColor || "c3daf9");\r
 267         }\r
 268         this.dragging = false;\r
 269     },\r
 270 \r
 271     <div id="method-Ext.dd.DragSource-beforeInvalidDrop"></div>/**\r
 272      * An empty function by default, but provided so that you can perform a custom action after an invalid\r
 273      * drop has occurred.\r
 274      * @param {Ext.dd.DragDrop} target The drop target\r
 275      * @param {Event} e The event object\r
 276      * @param {String} id The id of the dragged element\r
 277      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel\r
 278      */\r
 279     beforeInvalidDrop : function(target, e, id){\r
 280         return true;\r
 281     },\r
 282 \r
 283     // private\r
 284     handleMouseDown : function(e){\r
 285         if(this.dragging) {\r
 286             return;\r
 287         }\r
 288         var data = this.getDragData(e);\r
 289         if(data && this.onBeforeDrag(data, e) !== false){\r
 290             this.dragData = data;\r
 291             this.proxy.stop();\r
 292             Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);\r
 293         } \r
 294     },\r
 295 \r
 296     <div id="method-Ext.dd.DragSource-onBeforeDrag"></div>/**\r
 297      * An empty function by default, but provided so that you can perform a custom action before the initial\r
 298      * drag event begins and optionally cancel it.\r
 299      * @param {Object} data An object containing arbitrary data to be shared with drop targets\r
 300      * @param {Event} e The event object\r
 301      * @return {Boolean} isValid True if the drag event is valid, else false to cancel\r
 302      */\r
 303     onBeforeDrag : function(data, e){\r
 304         return true;\r
 305     },\r
 306 \r
 307     <div id="method-Ext.dd.DragSource-onStartDrag"></div>/**\r
 308      * An empty function by default, but provided so that you can perform a custom action once the initial\r
 309      * drag event has begun.  The drag cannot be canceled from this function.\r
 310      * @param {Number} x The x position of the click on the dragged object\r
 311      * @param {Number} y The y position of the click on the dragged object\r
 312      */\r
 313     onStartDrag : Ext.emptyFn,\r
 314 \r
 315     // private override\r
 316     startDrag : function(x, y){\r
 317         this.proxy.reset();\r
 318         this.dragging = true;\r
 319         this.proxy.update("");\r
 320         this.onInitDrag(x, y);\r
 321         this.proxy.show();\r
 322     },\r
 323 \r
 324     // private\r
 325     onInitDrag : function(x, y){\r
 326         var clone = this.el.dom.cloneNode(true);\r
 327         clone.id = Ext.id(); // prevent duplicate ids\r
 328         this.proxy.update(clone);\r
 329         this.onStartDrag(x, y);\r
 330         return true;\r
 331     },\r
 332 \r
 333     <div id="method-Ext.dd.DragSource-getProxy"></div>/**\r
 334      * Returns the drag source's underlying {@link Ext.dd.StatusProxy}\r
 335      * @return {Ext.dd.StatusProxy} proxy The StatusProxy\r
 336      */\r
 337     getProxy : function(){\r
 338         return this.proxy;  \r
 339     },\r
 340 \r
 341     <div id="method-Ext.dd.DragSource-hideProxy"></div>/**\r
 342      * Hides the drag source's {@link Ext.dd.StatusProxy}\r
 343      */\r
 344     hideProxy : function(){\r
 345         this.proxy.hide();  \r
 346         this.proxy.reset(true);\r
 347         this.dragging = false;\r
 348     },\r
 349 \r
 350     // private\r
 351     triggerCacheRefresh : function(){\r
 352         Ext.dd.DDM.refreshCache(this.groups);\r
 353     },\r
 354 \r
 355     // private - override to prevent hiding\r
 356     b4EndDrag: function(e) {\r
 357     },\r
 358 \r
 359     // private - override to prevent moving\r
 360     endDrag : function(e){\r
 361         this.onEndDrag(this.dragData, e);\r
 362     },\r
 363 \r
 364     // private\r
 365     onEndDrag : function(data, e){\r
 366     },\r
 367     \r
 368     // private - pin to cursor\r
 369     autoOffset : function(x, y) {\r
 370         this.setDelta(-12, -20);\r
 371     }    \r
 372 });</pre>
 373 </body>
 374 </html>