docs/source/DragTracker.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.dd.DragTracker"></div>/**\r
  10  * @class Ext.dd.DragTracker\r
  11  * @extends Ext.util.Observable\r
  12  */\r
  13 Ext.dd.DragTracker = Ext.extend(Ext.util.Observable,  {\r
  14     <div id="cfg-Ext.dd.DragTracker-active"></div>/**\r
  15      * @cfg {Boolean} active\r
  16          * Defaults to <tt>false</tt>.\r
  17          */     \r
  18     active: false,\r
  19     <div id="cfg-Ext.dd.DragTracker-tolerance"></div>/**\r
  20      * @cfg {Number} tolerance\r
  21          * Defaults to <tt>5</tt>.\r
  22          */     \r
  23     tolerance: 5,\r
  24     <div id="cfg-Ext.dd.DragTracker-autoStart"></div>/**\r
  25      * @cfg {Boolean/Number} autoStart\r
  26          * Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms.\r
  27          * Specify a Number for the number of milliseconds to defer trigger start.\r
  28          */     \r
  29     autoStart: false,\r
  30     \r
  31     constructor : function(config){\r
  32         Ext.apply(this, config);\r
  33             this.addEvents(\r
  34                 <div id="event-Ext.dd.DragTracker-mousedown"></div>/**\r
  35                  * @event mousedown\r
  36                  * @param {Object} this\r
  37                  * @param {Object} e event object\r
  38                  */\r
  39                 'mousedown',\r
  40                 <div id="event-Ext.dd.DragTracker-mouseup"></div>/**\r
  41                  * @event mouseup\r
  42                  * @param {Object} this\r
  43                  * @param {Object} e event object\r
  44                  */\r
  45                 'mouseup',\r
  46                 <div id="event-Ext.dd.DragTracker-mousemove"></div>/**\r
  47                  * @event mousemove\r
  48                  * @param {Object} this\r
  49                  * @param {Object} e event object\r
  50                  */\r
  51                 'mousemove',\r
  52                 <div id="event-Ext.dd.DragTracker-dragstart"></div>/**\r
  53                  * @event dragstart\r
  54                  * @param {Object} this\r
  55                  * @param {Object} startXY the page coordinates of the event\r
  56                  */\r
  57                 'dragstart',\r
  58                 <div id="event-Ext.dd.DragTracker-dragend"></div>/**\r
  59                  * @event dragend\r
  60                  * @param {Object} this\r
  61                  * @param {Object} e event object\r
  62                  */\r
  63                 'dragend',\r
  64                 <div id="event-Ext.dd.DragTracker-drag"></div>/**\r
  65                  * @event drag\r
  66                  * @param {Object} this\r
  67                  * @param {Object} e event object\r
  68                  */\r
  69                 'drag'\r
  70             );\r
  71         \r
  72             this.dragRegion = new Ext.lib.Region(0,0,0,0);\r
  73         \r
  74             if(this.el){\r
  75                 this.initEl(this.el);\r
  76             }\r
  77         Ext.dd.DragTracker.superclass.constructor.call(this, config);\r
  78     },\r
  79 \r
  80     initEl: function(el){\r
  81         this.el = Ext.get(el);\r
  82         el.on('mousedown', this.onMouseDown, this,\r
  83                 this.delegate ? {delegate: this.delegate} : undefined);\r
  84     },\r
  85 \r
  86     destroy : function(){\r
  87         this.el.un('mousedown', this.onMouseDown, this);\r
  88     },\r
  89 \r
  90     onMouseDown: function(e, target){\r
  91         if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){\r
  92             this.startXY = this.lastXY = e.getXY();\r
  93             this.dragTarget = this.delegate ? target : this.el.dom;\r
  94             if(this.preventDefault !== false){\r
  95                 e.preventDefault();\r
  96             }\r
  97             var doc = Ext.getDoc();\r
  98             doc.on('mouseup', this.onMouseUp, this);\r
  99             doc.on('mousemove', this.onMouseMove, this);\r
 100             doc.on('selectstart', this.stopSelect, this);\r
 101             if(this.autoStart){\r
 102                 this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);\r
 103             }\r
 104         }\r
 105     },\r
 106 \r
 107     onMouseMove: function(e, target){\r
 108         // HACK: IE hack to see if button was released outside of window. */\r
 109         if(this.active && Ext.isIE && !e.browserEvent.button){\r
 110             e.preventDefault();\r
 111             this.onMouseUp(e);\r
 112             return;\r
 113         }\r
 114 \r
 115         e.preventDefault();\r
 116         var xy = e.getXY(), s = this.startXY;\r
 117         this.lastXY = xy;\r
 118         if(!this.active){\r
 119             if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){\r
 120                 this.triggerStart();\r
 121             }else{\r
 122                 return;\r
 123             }\r
 124         }\r
 125         this.fireEvent('mousemove', this, e);\r
 126         this.onDrag(e);\r
 127         this.fireEvent('drag', this, e);\r
 128     },\r
 129 \r
 130     onMouseUp: function(e){\r
 131         var doc = Ext.getDoc();\r
 132         doc.un('mousemove', this.onMouseMove, this);\r
 133         doc.un('mouseup', this.onMouseUp, this);\r
 134         doc.un('selectstart', this.stopSelect, this);\r
 135         e.preventDefault();\r
 136         this.clearStart();\r
 137         var wasActive = this.active;\r
 138         this.active = false;\r
 139         delete this.elRegion;\r
 140         this.fireEvent('mouseup', this, e);\r
 141         if(wasActive){\r
 142             this.onEnd(e);\r
 143             this.fireEvent('dragend', this, e);\r
 144         }\r
 145     },\r
 146 \r
 147     triggerStart: function(isTimer){\r
 148         this.clearStart();\r
 149         this.active = true;\r
 150         this.onStart(this.startXY);\r
 151         this.fireEvent('dragstart', this, this.startXY);\r
 152     },\r
 153 \r
 154     clearStart : function(){\r
 155         if(this.timer){\r
 156             clearTimeout(this.timer);\r
 157             delete this.timer;\r
 158         }\r
 159     },\r
 160 \r
 161     stopSelect : function(e){\r
 162         e.stopEvent();\r
 163         return false;\r
 164     },\r
 165 \r
 166     onBeforeStart : function(e){\r
 167 \r
 168     },\r
 169 \r
 170     onStart : function(xy){\r
 171 \r
 172     },\r
 173 \r
 174     onDrag : function(e){\r
 175 \r
 176     },\r
 177 \r
 178     onEnd : function(e){\r
 179 \r
 180     },\r
 181 \r
 182     getDragTarget : function(){\r
 183         return this.dragTarget;\r
 184     },\r
 185 \r
 186     getDragCt : function(){\r
 187         return this.el;\r
 188     },\r
 189 \r
 190     getXY : function(constrain){\r
 191         return constrain ?\r
 192                this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;\r
 193     },\r
 194 \r
 195     getOffset : function(constrain){\r
 196         var xy = this.getXY(constrain);\r
 197         var s = this.startXY;\r
 198         return [s[0]-xy[0], s[1]-xy[1]];\r
 199     },\r
 200 \r
 201     constrainModes: {\r
 202         'point' : function(xy){\r
 203 \r
 204             if(!this.elRegion){\r
 205                 this.elRegion = this.getDragCt().getRegion();\r
 206             }\r
 207 \r
 208             var dr = this.dragRegion;\r
 209 \r
 210             dr.left = xy[0];\r
 211             dr.top = xy[1];\r
 212             dr.right = xy[0];\r
 213             dr.bottom = xy[1];\r
 214 \r
 215             dr.constrainTo(this.elRegion);\r
 216 \r
 217             return [dr.left, dr.top];\r
 218         }\r
 219     }\r
 220 });</pre>    \r
 221 </body>\r
 222 </html>