中间件编程

开发平台：
JavaScript

DragTracker.js：源码内容
							/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @class Ext.dd.DragTracker
 * @extends Ext.util.Observable
 */
Ext.dd.DragTracker = function(config){
    Ext.apply(this, config);
    this.addEvents(
        /**
         * @event mousedown
         * @param {Object} this
         * @param {Object} e event object
         */
        'mousedown',
        /**
         * @event mouseup
         * @param {Object} this
         * @param {Object} e event object
         */
        'mouseup',
        /**
         * @event mousemove
         * @param {Object} this
         * @param {Object} e event object
         */
        'mousemove',
        /**
         * @event dragstart
         * @param {Object} this
         * @param {Object} startXY the page coordinates of the event
         */
        'dragstart',
        /**
         * @event dragend
         * @param {Object} this
         * @param {Object} e event object
         */
        'dragend',
        /**
         * @event drag
         * @param {Object} this
         * @param {Object} e event object
         */
        'drag'
    );
    this.dragRegion = new Ext.lib.Region(0,0,0,0);
    if(this.el){
        this.initEl(this.el);
    }
}
Ext.extend(Ext.dd.DragTracker, Ext.util.Observable,  {
    /**
     * @cfg {Boolean} active
	 * Defaults to <tt>false</tt>.
	 */	
    active: false,
    /**
     * @cfg {Number} tolerance
	 * Defaults to <tt>5</tt>.
	 */	
    tolerance: 5,
    /**
     * @cfg {Boolean/Number} autoStart
	 * Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms.
	 * Specify a Number for the number of milliseconds to defer trigger start.
	 */	
    autoStart: false,
    initEl: function(el){
        this.el = Ext.get(el);
        el.on('mousedown', this.onMouseDown, this,
                this.delegate ? {delegate: this.delegate} : undefined);
    },
    destroy : function(){
        this.el.un('mousedown', this.onMouseDown, this);
    },
    onMouseDown: function(e, target){
        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
            this.startXY = this.lastXY = e.getXY();
            this.dragTarget = this.delegate ? target : this.el.dom;
            if(this.preventDefault !== false){
                e.preventDefault();
            }
            var doc = Ext.getDoc();
            doc.on('mouseup', this.onMouseUp, this);
            doc.on('mousemove', this.onMouseMove, this);
            doc.on('selectstart', this.stopSelect, this);
            if(this.autoStart){
                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
            }
        }
    },
    onMouseMove: function(e, target){
        // HACK: IE hack to see if button was released outside of window. */
        if(this.active && Ext.isIE && !e.browserEvent.button){
            e.preventDefault();
            this.onMouseUp(e);
            return;
        }
        e.preventDefault();
        var xy = e.getXY(), s = this.startXY;
        this.lastXY = xy;
        if(!this.active){
            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
                this.triggerStart();
            }else{
                return;
            }
        }
        this.fireEvent('mousemove', this, e);
        this.onDrag(e);
        this.fireEvent('drag', this, e);
    },
    onMouseUp: function(e){
        var doc = Ext.getDoc();
        doc.un('mousemove', this.onMouseMove, this);
        doc.un('mouseup', this.onMouseUp, this);
        doc.un('selectstart', this.stopSelect, this);
        e.preventDefault();
        this.clearStart();
        var wasActive = this.active;
        this.active = false;
        delete this.elRegion;
        this.fireEvent('mouseup', this, e);
        if(wasActive){
            this.onEnd(e);
            this.fireEvent('dragend', this, e);
        }
    },
    triggerStart: function(isTimer){
        this.clearStart();
        this.active = true;
        this.onStart(this.startXY);
        this.fireEvent('dragstart', this, this.startXY);
    },
    clearStart : function(){
        if(this.timer){
            clearTimeout(this.timer);
            delete this.timer;
        }
    },
    stopSelect : function(e){
        e.stopEvent();
        return false;
    },
    onBeforeStart : function(e){
    },
    onStart : function(xy){
    },
    onDrag : function(e){
    },
    onEnd : function(e){
    },
    getDragTarget : function(){
        return this.dragTarget;
    },
    getDragCt : function(){
        return this.el;
    },
    getXY : function(constrain){
        return constrain ?
               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
    },
    getOffset : function(constrain){
        var xy = this.getXY(constrain);
        var s = this.startXY;
        return [s[0]-xy[0], s[1]-xy[1]];
    },
    constrainModes: {
        'point' : function(xy){
            if(!this.elRegion){
                this.elRegion = this.getDragCt().getRegion();
            }
            var dr = this.dragRegion;
            dr.left = xy[0];
            dr.top = xy[1];
            dr.right = xy[0];
            dr.bottom = xy[1];
            dr.constrainTo(this.elRegion);
            return [dr.left, dr.top];
        }
    }
});

						