在做页面开发的时候,使用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时触发拖拽对象,开始拖动 }