html可以移动的浮动窗口-阿里云开发者社区

html可以移动的浮动窗口

2016-05-10 4552

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

先看例子:

http://182.92.97.72/float_suspend/

效果描述:

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

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

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

关键code:

   Js代码  
    
  
// 拖拽效果  
    function drag(){  
        var tags = arguments;  
        // alert(tags[0].length);//长度为4  
          
        for(var i=0;i<tags[0].length;i++){  
            // addEvent(tags[0].get(i),'mousedown',function(e){  
                $(tags[0].get(i)).bind('mousedown',function(e){  
                if(trim(this.innerHTML).length == 0) e.preventDefault();  
                var _this = this;  
                // var diffX = e.clientX - _this.offsetLeft;  
                // var diffY = e.clientY - _this.offsetTop;  
  
                var diffX = e.clientX - $(_this).parent().get(0).offsetLeft;  
                var diffY = e.clientY - $(_this).parent().get(0).offsetTop;  
  
  
                //自定义拖拽区域  
                var flag = false;                 
                for (var i = 0; i < tags[0].length; i ++) {  
                    if (e.target == tags[0].get(i)) {  
                        flag = true;                    //只要有一个是true，就立刻返回  
                        break;  
                    }  
                }  
  
  
                if (flag) {  
                    $(document).bind('mousemove',move);  
                    $(document).bind('mouseup',up);  
                } else {  
                    $(document).unbind('mousemove',move);  
                    $(document).unbind('mousemove',up);  
                }  
              
            function move(e) {  
      
                $('div.suspend').css("position", 'absolute');//保证移动div的标题时,div跟着移动  
                scrollTop22=document.body.scrollTop;  
                if(isIEtest && scrollTop22==0){//IE中  
                    scrollTop22=document.documentElement.scrollTop;  
                }  
                //alert();  
                var left = e.clientX - diffX;  
                var old_top = e.clientY - diffY;  
                var top=old_top+scrollTop22;  
                //console.log(old_top+"\t"+scrollTop22);      
                var divWidth22=$(_this).parent().get(0).offsetWidth;//div 的宽度  
                var screenWidth=document.body.clientWidth;//屏幕宽度,不兼容IE  
                if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
                    screenWidth=document.documentElement.clientWidth;//屏幕宽度  
                }  
                //console.log(left+"\t"+screenWidth);  
                var rightZero=(screenWidth-divWidth22)-left;  
                if(rightZero<0)//防止div跑到窗口的右边之外  
                {  
                    left+=rightZero;  
                }  
                if (left < 0) {  
                    left = 0;  
                }else if(left <= getScroll().left){  
                    left = getScroll().left;  
                } else if (left > getInner().width + getScroll().left - $(_this).parent().get(0).offsetWidth) {  
                    left = getInner().width + getScroll().left- $(_this).parent().get(0).offsetWidth;  
                }  
                  
                if (top < 0) {  
                    top = 0;  
                }else if(top <= getScroll().top){  
                    top = getScroll().top  
                } else if (top > getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight) {  
                    top = getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight;  
                }  
  
  
                $(_this).parent().get(0).style.left = left + 'px';  
                $(_this).parent().get(0).style.top = top + 'px';  
                //$(_this).parent().get(0).style.bottom= (50+old_top)+ 'px';  
                if (typeof _this.setCapture != 'undefined') {  
                    _this.setCapture();  
                }   
            }  
              
            function up(e) {  
                $('div.suspend').css("position", 'fixed');//保证上下移动滚动条时div保持不变,所以必须恢复为fixed  
                var event_clientY=e.clientY;  
                var top =event_clientY  - diffY;  
                var screenHight=document.body.clientHeight;//屏幕高度,不兼容IE  
                if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
                    screenHight=document.documentElement.clientHeight;//屏幕高度  
                }  
                var divHeight22=$(_this).parent().get(0).offsetHeight;//div 的高度  
                //console.log(event_clientY+"\t "+diffY+"\t"+screenHight+"\t"+divHeight22+"\t"+document.body.scrollTop );  
                var bottomZero=screenHight-divHeight22+diffY;  
                //console.log(bottomZero+"\t"+top);  
                if(event_clientY>bottomZero){//防止div跑到bottom以下,防止div跑出窗口之下  
                    //alert(111);  
                    top-=(event_clientY-bottomZero);  
                }  
                if(top<0)//top为负数,就表示div拖拽到窗口之上了  
                {  
                    top=0;//防止div跑出窗口之上  
                }  
                $(_this).parent().get(0).style.top = top + 'px';//解决鼠标松开时位置突变的不正常现象  
                $(document).unbind('mousemove',move);  
                $(document).unbind('mouseup',up);  
                if (typeof _this.releaseCapture != 'undefined') {  
                    _this.releaseCapture();  
                }  
            }  
  
  
            });  
        }  

html可以移动的浮动窗口

热门文章

最新文章

相关课程

相关电子书

相关实验场景