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.         }  
相关文章
|
1月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
18 2
自适应窗口图片轮播HTML代码
|
9月前
【HTML】制作一个简单的浮动广告页面
【HTML】制作一个简单的浮动广告页面
170 1
|
前端开发 Python
Python HTML和CSS 8:浮动布局
Python HTML和CSS 8:浮动布局
171 0
Python HTML和CSS 8:浮动布局
|
移动开发 开发者 HTML5
Facebook CTO:今年重点关注HTML5和移动平台
【Csdn.net编译】导读:本文根据Techcrunch.com编辑MG Siegler与Facebook技术总监Bret Taylor的对话内容编译整理完成。以下是文章的内容: 昨天,在旧金山的社交网络应用大会上,我有机会和Facebook技术总监Bret Taylor一起坐下来。
812 0