html可以移动的浮动窗口

先看例子:

http://182.92.97.72/float_suspend/

效果描述:

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

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

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

 

关键code:

// 拖拽效果
	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();
				}
			}


			});
		}

 源代码见附件float_suspend.zip

参考:http://huangkunlun520.blog.51cto.com/2562772/1570707

评论

3 楼 hw1287789687 2017-02-13  

蒙奇君杰 写道

谢谢了！挺有用的

能帮到你很开心

2 楼 蒙奇君杰 2017-02-08  

谢谢了！挺有用的

1 楼 hw1287789687 2014-11-02  

参考http://huangkunlun520.blog.51cto.com/2562772/1570707