docs/source/DragSource.html

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