html可以移动的浮动窗口

先看例子:

http://182.92.97.72/float_suspend/

效果描述:

(1) 鼠标点击" "即可拖动;

(2)滚动网页的竖直滚动条时,该窗口的位置固定不变;

(3)无论怎么移动,该窗口不会跑到网页可视范围之外

 

关键code:

Js代码  

1. // 拖拽效果  
2.     function drag(){  
3.         var tags = arguments;  
4.         // alert(tags[0].length);//长度为4  
5.           
6.         for(var i=0;i<tags[0].length;i++){  
7.             // addEvent(tags[0].get(i),'mousedown',function(e){  
8.                 $(tags[0].get(i)).bind('mousedown',function(e){  
9.                 if(trim(this.innerHTML).length == 0) e.preventDefault();  
10.                 var _this = this;  
11.                 // var diffX = e.clientX - _this.offsetLeft;  
12.                 // var diffY = e.clientY - _this.offsetTop;  
13.   
14.                 var diffX = e.clientX - $(_this).parent().get(0).offsetLeft;  
15.                 var diffY = e.clientY - $(_this).parent().get(0).offsetTop;  
16.   
17.   
18.                 //自定义拖拽区域  
19.                 var flag = false;                 
20.                 for (var i = 0; i < tags[0].length; i ++) {  
21.                     if (e.target == tags[0].get(i)) {  
22.                         flag = true;                    //只要有一个是true，就立刻返回  
23.                         break;  
24.                     }  
25.                 }  
26.   
27.   
28.                 if (flag) {  
29.                     $(document).bind('mousemove',move);  
30.                     $(document).bind('mouseup',up);  
31.                 } else {  
32.                     $(document).unbind('mousemove',move);  
33.                     $(document).unbind('mousemove',up);  
34.                 }  
35.               
36.             function move(e) {  
37.       
38.                 $('div.suspend').css("position", 'absolute');//保证移动div的标题时,div跟着移动  
39.                 scrollTop22=document.body.scrollTop;  
40.                 if(isIEtest && scrollTop22==0){//IE中  
41.                     scrollTop22=document.documentElement.scrollTop;  
42.                 }  
43.                 //alert();  
44.                 var left = e.clientX - diffX;  
45.                 var old_top = e.clientY - diffY;  
46.                 var top=old_top+scrollTop22;  
47.                 //console.log(old_top+"\t"+scrollTop22);      
48.                 var divWidth22=$(_this).parent().get(0).offsetWidth;//div 的宽度  
49.                 var screenWidth=document.body.clientWidth;//屏幕宽度,不兼容IE  
50.                 if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
51.                     screenWidth=document.documentElement.clientWidth;//屏幕宽度  
52.                 }  
53.                 //console.log(left+"\t"+screenWidth);  
54.                 var rightZero=(screenWidth-divWidth22)-left;  
55.                 if(rightZero<0)//防止div跑到窗口的右边之外  
56.                 {  
57.                     left+=rightZero;  
58.                 }  
59.                 if (left < 0) {  
60.                     left = 0;  
61.                 }else if(left <= getScroll().left){  
62.                     left = getScroll().left;  
63.                 } else if (left > getInner().width + getScroll().left - $(_this).parent().get(0).offsetWidth) {  
64.                     left = getInner().width + getScroll().left- $(_this).parent().get(0).offsetWidth;  
65.                 }  
66.                   
67.                 if (top < 0) {  
68.                     top = 0;  
69.                 }else if(top <= getScroll().top){  
70.                     top = getScroll().top  
71.                 } else if (top > getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight) {  
72.                     top = getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight;  
73.                 }  
74.   
75.   
76.                 $(_this).parent().get(0).style.left = left + 'px';  
77.                 $(_this).parent().get(0).style.top = top + 'px';  
78.                 //$(_this).parent().get(0).style.bottom= (50+old_top)+ 'px';  
79.                 if (typeof _this.setCapture != 'undefined') {  
80.                     _this.setCapture();  
81.                 }   
82.             }  
83.               
84.             function up(e) {  
85.                 $('div.suspend').css("position", 'fixed');//保证上下移动滚动条时div保持不变,所以必须恢复为fixed  
86.                 var event_clientY=e.clientY;  
87.                 var top =event_clientY  - diffY;  
88.                 var screenHight=document.body.clientHeight;//屏幕高度,不兼容IE  
89.                 if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
90.                     screenHight=document.documentElement.clientHeight;//屏幕高度  
91.                 }  
92.                 var divHeight22=$(_this).parent().get(0).offsetHeight;//div 的高度  
93.                 //console.log(event_clientY+"\t "+diffY+"\t"+screenHight+"\t"+divHeight22+"\t"+document.body.scrollTop );  
94.                 var bottomZero=screenHight-divHeight22+diffY;  
95.                 //console.log(bottomZero+"\t"+top);  
96.                 if(event_clientY>bottomZero){//防止div跑到bottom以下,防止div跑出窗口之下  
97.                     //alert(111);  
98.                     top-=(event_clientY-bottomZero);  
99.                 }  
100.                 if(top<0)//top为负数,就表示div拖拽到窗口之上了  
101.                 {  
102.                     top=0;//防止div跑出窗口之上  
103.                 }  
104.                 $(_this).parent().get(0).style.top = top + 'px';//解决鼠标松开时位置突变的不正常现象  
105.                 $(document).unbind('mousemove',move);  
106.                 $(document).unbind('mouseup',up);  
107.                 if (typeof _this.releaseCapture != 'undefined') {  
108.                     _this.releaseCapture();  
109.                 }  
110.             }  
111.   
112.   
113.             });  
114.         }