docs/source/DragSource.html

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