[转]JavaScript简单实现div拖拽

 

Javascript  元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

说明: 
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动

针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()
针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener
Opera 以上两种方法都支持

在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute; 
且应指定 left && top 的坐标值, 如:

1. linenum
2.     
3.         element 1
   
4.         dragging compatibility for IE, Opera, Firefox. 
5.     

函数 fDragging(obj, e, limit) 的各参数解释:
obj: HTML元素对象, 要拖曳的元素
e: 指定为 event 对象, 主要为兼容 Firefox
limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置. 

函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性 下使用, 如: 

1. linenum
2.     
3.         element 
   
4.         dragging compatibility for IE, Opera, Firefox. 
5.     

shawl.qiu 
2006-11-10
http://blog.youkuaiyun.com/btbtd

函数: fDragging(obj, e, limit) 及使用演示

1. linenum
2. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. http://www.w3.org/1999/xhtml">
9. //
10.     function fDragging(obj, e, limit){
11.         if(!e) e=window.event;
12.         var x=parseInt(obj.style.left);
13.         var y=parseInt(obj.style.top);
14.         
15.         var x_=e.clientX-x;
16.         var y_=e.clientY-y;
17.         
18.         if(document.addEventListener){
19.             document.addEventListener('mousemove', inFmove, true);
20.             document.addEventListener('mouseup', inFup, true);
21.         } else if(document.attachEvent){
22.             document.attachEvent('onmousemove', inFmove);
23.             document.attachEvent('onmouseup', inFup);
24.         }
25.         
26.         inFstop(e);    
27.         inFabort(e)
28.         
29.         function inFmove(e){
30.             var evt;
31.             if(!e)e=window.event;
32.             
33.             if(limit){
34.                 var op=obj.parentNode;
35.                 var opX=parseInt(op.style.left);
36.                 var opY=parseInt(op.style.top);
37.                 
38.                 if((e.clientX-x_)<0) return false;
39.                 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
40.                 
41.                 if(e.clientY-y_<0) return false;
42.                 else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
43.                 //status=e.clientY-y_;
44.             }
45.             
46.             obj.style.left=e.clientX-x_+'px';
47.             obj.style.top=e.clientY-y_+'px';
48.             
49.             inFstop(e);
50.         } // shawl.qiu script
51.         function inFup(e){
52.             var evt;
53.             if(!e)e=window.event;
54.             
55.             if(document.removeEventListener){
56.                 document.removeEventListener('mousemove', inFmove, true);
57.                 document.removeEventListener('mouseup', inFup, true);
58.             } else if(document.detachEvent){
59.                 document.detachEvent('onmousemove', inFmove);
60.                 document.detachEvent('onmouseup', inFup);
61.             }
62.             
63.             inFstop(e);
64.         } // shawl.qiu script
65.  
66.         function inFstop(e){
67.             if(e.stopPropagation) return e.stopPropagation();
68.             else return e.cancelBubble=true;            
69.         } // shawl.qiu script
70.         function inFabort(e){
71.             if(e.preventDefault) return e.preventDefault();
72.             else return e.returnValue=false;
73.         } // shawl.qiu script
74.     }
75. //]]>
79.  this parent
80.  
81.     
82.         element 
    
83.         dragging compatibility for IE, Opera, Firefox. 
84.     
85.     
86.         element 1
    
87.         dragging compatibility for IE, Opera, Firefox. 
88.     
89.     
90.         element 2
    
91.         dragging compatibility for IE, Opera, Firefox. 
    
92.          dragging everywhere
93.     

 来源： http://blog.youkuaiyun.com/btbtd/archive/2006/11/10/1377810.aspx