source/dd/DragTracker.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.dd.DragTracker = function(config){\r
  10     Ext.apply(this, config);\r
  11     this.addEvents(\r
  12         'mousedown',\r
  13         'mouseup',\r
  14         'mousemove',\r
  15         'dragstart',\r
  16         'dragend',\r
  17         'drag'\r
  18     );\r
  19 \r
  20     this.dragRegion = new Ext.lib.Region(0,0,0,0);\r
  21 \r
  22     if(this.el){\r
  23         this.initEl(this.el);\r
  24     }\r
  25 }\r
  26 \r
  27 Ext.extend(Ext.dd.DragTracker, Ext.util.Observable,  {\r
  28     active: false,\r
  29     tolerance: 5,\r
  30     autoStart: false,\r
  31 \r
  32     initEl: function(el){\r
  33         this.el = Ext.get(el);\r
  34         el.on('mousedown', this.onMouseDown, this,\r
  35                 this.delegate ? {delegate: this.delegate} : undefined);\r
  36     },\r
  37 \r
  38     destroy : function(){\r
  39         this.el.un('mousedown', this.onMouseDown, this);\r
  40     },\r
  41 \r
  42     onMouseDown: function(e, target){\r
  43         if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){\r
  44             this.startXY = this.lastXY = e.getXY();\r
  45             this.dragTarget = this.delegate ? target : this.el.dom;\r
  46             e.preventDefault();\r
  47             var doc = Ext.getDoc();\r
  48             doc.on('mouseup', this.onMouseUp, this);\r
  49             doc.on('mousemove', this.onMouseMove, this);\r
  50             doc.on('selectstart', this.stopSelect, this);\r
  51             if(this.autoStart){\r
  52                 this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);\r
  53             }\r
  54         }\r
  55     },\r
  56 \r
  57     onMouseMove: function(e, target){\r
  58         e.preventDefault();\r
  59         var xy = e.getXY(), s = this.startXY;\r
  60         this.lastXY = xy;\r
  61         if(!this.active){\r
  62             if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){\r
  63                 this.triggerStart();\r
  64             }else{\r
  65                 return;\r
  66             }\r
  67         }\r
  68         this.fireEvent('mousemove', this, e);\r
  69         this.onDrag(e);\r
  70         this.fireEvent('drag', this, e);\r
  71     },\r
  72 \r
  73     onMouseUp: function(e){\r
  74         var doc = Ext.getDoc();\r
  75         doc.un('mousemove', this.onMouseMove, this);\r
  76         doc.un('mouseup', this.onMouseUp, this);\r
  77         doc.un('selectstart', this.stopSelect, this);\r
  78         e.preventDefault();\r
  79         this.clearStart();\r
  80         this.active = false;\r
  81         delete this.elRegion;\r
  82         this.fireEvent('mouseup', this, e);\r
  83         this.onEnd(e);\r
  84         this.fireEvent('dragend', this, e);\r
  85     },\r
  86 \r
  87     triggerStart: function(isTimer){\r
  88         this.clearStart();\r
  89         this.active = true;\r
  90         this.onStart(this.startXY);\r
  91         this.fireEvent('dragstart', this, this.startXY);\r
  92     },\r
  93 \r
  94     clearStart : function(){\r
  95         if(this.timer){\r
  96             clearTimeout(this.timer);\r
  97             delete this.timer;\r
  98         }\r
  99     },\r
 100 \r
 101     stopSelect : function(e){\r
 102         e.stopEvent();\r
 103         return false;\r
 104     },\r
 105 \r
 106     onBeforeStart : function(e){\r
 107 \r
 108     },\r
 109 \r
 110     onStart : function(xy){\r
 111 \r
 112     },\r
 113 \r
 114     onDrag : function(e){\r
 115 \r
 116     },\r
 117 \r
 118     onEnd : function(e){\r
 119 \r
 120     },\r
 121 \r
 122     getDragTarget : function(){\r
 123         return this.dragTarget;\r
 124     },\r
 125 \r
 126     getDragCt : function(){\r
 127         return this.el;\r
 128     },\r
 129 \r
 130     getXY : function(constrain){\r
 131         return constrain ?\r
 132                this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;\r
 133     },\r
 134 \r
 135     getOffset : function(constrain){\r
 136         var xy = this.getXY(constrain);\r
 137         var s = this.startXY;\r
 138         return [s[0]-xy[0], s[1]-xy[1]];\r
 139     },\r
 140 \r
 141     constrainModes: {\r
 142         'point' : function(xy){\r
 143 \r
 144             if(!this.elRegion){\r
 145                 this.elRegion = this.getDragCt().getRegion();\r
 146             }\r
 147 \r
 148             var dr = this.dragRegion;\r
 149 \r
 150             dr.left = xy[0];\r
 151             dr.top = xy[1];\r
 152             dr.right = xy[0];\r
 153             dr.bottom = xy[1];\r
 154 \r
 155             dr.constrainTo(this.elRegion);\r
 156 \r
 157             return [dr.left, dr.top];\r
 158         }\r
 159     }\r
 160 });