层的拖拽js代码，兼容ie，ff。

层的拖拽（转载），本人在原来的基础上完善了一下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 
  7 </head>
  8 
  9 <body>
 10 
 11 
 12 <div id="dd_test" style="width:100px; height:100px; background:red; position:absolute">
 13    <div id="dd_test_title" style="width:100px; height:20px; background:#003399">aaa</div>
 14 
 15     <div id="dd_test_content" style="width:100px; height:80px; background: #066">adfdfdfsdfaa</div>
 16 
 17 
 18 </div>
 19 <div id="test_write" style="top:200px; position:absolute">fdsfsd</div>
 20 
 21 
 22 <script>
 23 
 24 function getEvent(e) {
 25     var ev = e || window.event;
 26     if (!ev) {
 27         var c = this.getEvent.caller;
 28         while (c) {
 29             ev = c.arguments[0];
 30             if (ev && Event == ev.constructor) {
 31                 break;
 32             }
 33             c = c.caller;
 34         }
 35     }
 36     return ev;
 37 }
 38 /*事件监听*/
 39 function addEvent(obj,eventName,fn){
 40 
 41     if(obj.attachEvent){
 42          
 43         obj.attachEvent("on"+eventName,fn);    
 44         
 45     }else{
 46     
 47         obj.addEventListener(eventName,fn,false);    
 48     }
 49     
 50 }
 51 /*移除事件监听*/
 52 function removeEvent(obj,eventName,fn){
 53 
 54     if(obj.attachEvent){
 55          
 56        obj.detachEvent("on"+eventName,fn);    
 57         
 58     }else{
 59     
 60       obj.removeEventListener(eventName,fn,false);    
 61     }
 62     
 63 }
 64 
 65 /**
 66  * 拖动到实例类。
 67  * @param {Object} dragObjId 拖动层的ID。
 68  * @param {Object} dragCtrlId 控制这个层拖动到层的ID。
 69  */
 70 var XDragDrop = function(dragObjId,dragCtrlId){
 71  if(!dragObjId) return;
 72  var oDrag = document.getElementById(dragObjId);
 73  if(!oDrag) return;
 74  this.oDrag = oDrag;
 75  var oDragCtrl = document.getElementById(dragCtrlId);
 76  if(!oDragCtrl){//如果拖动控制层不存在，这定义整个拖动层为拖动控制层
 77   this.oDragCtrl = this.oDrag;
 78  }else{
 79   this.oDragCtrl = oDragCtrl;
 80  }
 81  this.oDragCtrl.style.cursor = "move";
 82  this._init(oDrag,oDragCtrl);//初始化拖动层
 83  this.onDrag(this.oFun);
 84   this.endDrag(this.xFun);
 85  
 86 };
 87 XDragDrop.prototype = {
 88  _init: function(oDrag,oDragCtrl){
 89   this.oDrag.style.position = 'absolute';
 90   this.oDragCtrl.style.position = 'absolute';
 91   
 92   this.oDragCtrl.onmousedown = function(e){   
 93   
 94   
 95    
 96    if(oDragCtrl.setCapture){
 97     oDragCtrl.setCapture();//IE下捕获鼠标事件
 98    }else{
 99     window.captureEvents(Event.MOUSEMOVE);//FF下捕获鼠标事件
100    }
101    getEvent(e).cancelBubble = true;//取消时间冒泡，防止事件冲突
102    var bMouseX = getEvent(e).clientX;
103    var bMouseY = getEvent(e).clientY;
104    
105    var x = parseInt(oDrag.offsetLeft);
106    var y = parseInt(oDrag.offsetTop); 
107    if(!oDrag.offsetLeft){
108     x = parseInt(oDrag.currentStyle.left);
109     y = parseInt(oDrag.currentStyle.top);
110    }
111   
112    oDragCtrl.onmousemove = function(e){
113     //鼠标移动后位置
114        var eMouseX = getEvent(e).clientX;
115           var eMouseY = getEvent(e).clientY;
116     this.parentNode.style.left = x+ eMouseX -bMouseX + "px";
117     this.parentNode.style.top = y + eMouseY - bMouseY + "px";
118    }
119    
120    oDragCtrl.onmouseup = function(){
121     if(oDragCtrl.releaseCapture){
122      oDragCtrl.releaseCapture();//IE下释放鼠标事件
123     }else{
124      window.releaseEvents(Event.MOUSEMOVE);//FF下释放鼠标事件
125     }
126     oDragCtrl.onmousemove=null;//置空onmousemove事件，防止内存泄漏
127     oDragCtrl.onmouseup=null;//置空onmouseup事件，防止内存泄漏
128    }
129   }
130  },
131  oFun:function(){
132      
133       dd_test1.oDrag.style.opacity=0.2;
134       dd_test1.oDrag.style.filter='alpha(opacity=20)';
135 
136   },
137   xFun:function(){
138      
139       dd_test1.oDrag.style.opacity=1.0; 
140        dd_test1.oDrag.style.filter='alpha(opacity=100)';
141   },
142  onDrag: function(oFun){//拖动开始触发的事件,存在事件监听的兼容问题，有空改进
143  
144   if(typeof oFun == 'function' && this.oDrag){
145       addEvent(this.oDragCtrl,"mousedown",oFun);
146   }
147  },
148  endDrag: function(xFun){//拖动结束触发的事件
149   if(typeof xFun == 'function' && this.oDrag){
150       addEvent(this.oDragCtrl,"mouseup",xFun);
151   }
152  } 
153 }
154 
155 
156 var dd_test1=new XDragDrop("dd_test","dd_test_title");
157 </script>
158 
159 
160 </body>
161 </html>

 还有一种写法：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9 
10 
11 <script type="text/javascript">
12 <!--
13 window.onload=function(){
14   objDiv = document.getElementById('drag');
15   drag(objDiv);
16 };
17 
18 function drag(dv){
19     var x;
20      var y
21   dv.onmousedown=function(e){
22       var d=document;
23       e = e || window.event;
24      
25       x= e.layerX || e.offsetX;
26        y= e.layerY || e.offsetY;
27      
28       //设置捕获范围
29       if(dv.setCapture){
30           dv.setCapture();
31       }else if(window.captureEvents){
32           window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
33       }
34       
35 
36       d.onmousemove=function(e){
37            e= e || window.event;
38            if(!e.pageX)e.pageX=e.clientX;
39            if(!e.pageY)e.pageY=e.clientY;
40            var tx=e.pageX-x;
41            var ty=e.pageY-y;
42         
43            dv.style.left=tx+"px";
44            dv.style.top=ty+"px";
45       };
46 
47       d.onmouseup=function(){
48            //取消捕获范围
49            if(dv.releaseCapture){
50               dv.releaseCapture();
51            }else if(window.captureEvents){
52               window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
53            }
54           
55           //清除事件
56           d.onmousemove=null;
57           d.onmouseup=null;
58       };
59    };
60 }
61 //-->
62 </script>
63 
64 <div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>
65 
66 
67 
68 </body>
69 </html>

 

 

posted @ 2013-04-12 12:02  梦飞无颜  阅读(212)  评论(0)  编辑  收藏  举报