Javascript拖動管理對象

   在做頁面開發的時候，使用Javascript拖動DOM元素是常見的一種操作，每次對於拖動都要檢測元素的onmousedown、onmousemove、onmouseup三個事件，並分別處理各種事件響應，對於這樣通用的操作，就可以寫一個拖動管理類來實現元素拖動的邏輯！

  下面的代碼使用了事件管理對象JEvent，JEvent的代碼參見上一篇日誌JEvent事件處理

/*
 *功能：拖動元素
 *Author：LQB
 *時間：2009-1-7
 * #include JEvents
*/
 var JDrag = function(){
        this.src_element = null;//觸發的元素
        this.src_top = 0;       //src_element的top
        this.src_left = 0 ;     //src_element的left
        this.src_right = 0 ;    //src_element的right
        this.src_bottom = 0;    //src_element的bottom
        this.src_width = 0;     //src_element的width
        this.src_height = 0;    //src_element的height
        this.src_mouseX = 0;    //源X座標
        this.src_mouseY = 0;    //源Y座標
        this.src_Event = null;  //源事件
        
        this.offsetX = 0;       //事件座標X偏移量
        this.offsetY = 0;       //事件座標Y偏移量
        this.eventX = 0;        //事件座標X
        this.eventY = 0;        //事件座標Y
        this.offsetEvent = null;//事件
        
        var m_isMoveing = false; 
        var m_me = this;        //用於私有成員訪問公有成員 
        /*--------------------------------以下是事件------------------------------*/
        var m_events=null;//事件對象
        var InitEvent = function(){
            m_events = new JEvents();
            m_events.addEvent("dragstart","draging","dragend");//添加事件
        }
        var m_addListener = function(eName,fn,scope){
            if(typeof(fn)!= "function"){
                throw "Event handle must be function!";
            }
            m_events.addListener(eName,fn,scope);
        };
        var m_fireEvent = function(eName){
            m_events.fireEvent(eName);
        }
        //以下三個方法是對外的事件委託
        this.οndragstart=function(fn,scope){
            m_addListener("dragstart",fn,scope);
        };
        this.ondraging=function(fn,scope){
            m_addListener("draging",fn,scope);
        };
        this.οndragend=function(fn,scope){
            m_addListener("dragend",fn,scope);
        };
        /*--------------------------------事件完畢--------------------------------*/
        //公有方法       
        this.DragStart = function(e){
            var event = window.event || e;
            if(event.srcElement)
                this.src_element = event.srcElement;
            else
                this.src_element = event.target;
            
            this.src_top = this.src_element.style.top;
            this.src_left = this.src_element.style.left;
            this.src_right = this.src_element.style.right;
            this.src_bottom = this.src_element.style.bottom;
            this.src_width =  parseInt(this.src_element.style.width);
            this.src_height = parseInt(this.src_element.style.height);

            this.src_Event = event;
            this.src_mouseX = event.clientX;
            this.src_mouseY = event.clientY;
            m_isMoveing = true;
            
            //爲了平滑移動效果,把MOUSEMOVE事件的捕獲交給document
            if(this.src_element.setCapture){
                this.src_element.setCapture();
                JEvents.bind(this.src_element,"onmousemove",this.Draging,this);
                JEvents.bind(this.src_element,"onmouseup",this.DragEnd,this);
            }
            else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                JEvents.bind(document,"onmousemove",this.Draging,this);
                JEvents.bind(document,"onmouseup",this.DragEnd,this);
            }
            m_fireEvent("dragstart");//觸發開始拖動事件
                
        };
        this.Draging = function(e){
            if(m_isMoveing){
                var event = window.event || e;
                this.offsetX = event.clientX - this.src_mouseX;
                this.offsetY = event.clientY - this.src_mouseY;
                this.eventX = event.clientX;
                this.eventY = event.clientY;
                this.offsetEvent = event;
                m_fireEvent("draging");//觸發拖動事件
            }
        }
        this.DragEnd = function(e){
            if(m_isMoveing){
                //爲了平滑移動效果,把MOUSEMOVE事件的捕獲交給document
                if(this.src_element.releaseCapture){
                    this.src_element.releaseCapture();
                    JEvents.unbind(this.src_element,"onmousemove",this.Draging);
                    JEvents.unbind(this.src_element,"onmouseup",this.DragEnd);
                }
                else if(window.captureEvents){
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                    JEvents.unbind(document,"onmousemove",this.Draging); 
                    JEvents.unbind(document,"onmouseup",this.DragEnd);
                }
                m_fireEvent("dragend");//觸發結束拖動事件
                reset();
            }
        }
        var reset = function(){
            m_isMoveing = false;
            m_me.offsetEvent=null;
            m_me.src_Event = null;
            m_me.src_element=null;
            m_me.src_top = 0;
            m_me.src_left = 0;
            m_me.src_right = 0;
            m_me.src_bottom = 0;
            m_me.src_width = 0;
            m_me.src_height = 0;
            m_me.src_mouseX = 0;
            m_me.src_mouseY = 0;
            m_me.offsetX = 0;
            m_me.offsetY = 0;
            m_me.eventX = 0;
            m_me.eventY = 0;
        }
        /*-------------------------以下是構造方法---------------------------------*/
        InitEvent();
        /*-------------------------構造方法完成-----------------------------------*/
   }

關於JDrag的調用，可以參考以下代碼：

var DragSimple=function(el){
    var m_Drag = null;
    var InitDrag = function(){
        m_Drag = new JDrag();
        m_Drag.ondragstart(Drag_start,m_me);     //開始拖拽
        m_Drag.ondraging(Drag_ing,m_me);         //拖拽中
        m_Drag.ondragend(Drag_end,m_me);         //拖拽結束
    }; 
    var Drag_start=function(){
        };
    var Drag_ing=function(){
　　　　　if(m_Drag.eventX >= m_Drag.src_mouseX){//向右移動
            if(m_Drag.eventY>=m_Drag.src_mouseY){//向右下移動
　　　　　　　　　//拖動處理代碼
	　　　｝
　　　　　｝
        };
    var Drag_end=function(){
       };
    InitDrag();
    JEvents.bind(el,"onmousedown",m_Drag.DragStart,m_Drag);//當mousedown時觸發拖拽對象，開始拖動
}