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