docs/source/DragSource.html

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