jquery实现的拖拽效果，解决拖动速度过快时的会卡现象，select的遮挡问题和透明效果

本文链接：https://blog.csdn.net/qinglinglaoren/article/details/7406932

本文介绍了如何使用jQuery实现拖拽功能，并解决拖动速度过快时的卡顿问题，以及在拖动过程中防止select元素被选中。同时，提出了一种通过创建覆盖层来处理文本选中问题的方法。针对IE6的满屏遮罩bug，文中提出了通过JS或CSS Hack来实现全屏效果的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<link type="text/css" rel="stylesheet" href="Css/layout_demo.css" />
<script type="text/javascript" src="Js/jquery1.6.1.js"></script>
<script type="text/javascript" src="Js/layout_demo.js"></script>
</head>
<!--作者：北京→南宫-->
<body>
<div class="all">
	<div class="layout_click"><a href="#">点击这里，弹出层</a></div>
    <div class="layout_show">
    	<div class="top">
    		<div class="title">这是标题</div>
            <div class="close"><a href="#">X 关闭</a></div>
        </div>
        <div class="content">这是内容</div>
    </div>
    <iframe class="mask"></iframe>
    <div class="mask"></div>
</div>

</body>
</html>

css样式：@charset "utf-8";
/* CSS Document */
/*作者：北京→南宫*/

body {
	font:12px/14px Verdana, Geneva, sans-serif;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
.all {
	padding:20px;
}
.layout_click {
	padding:5px;
}
.layout_show {
	overflow:hidden;
	display:none;
	width:300px;
	height:300px;
	margin:-150px 0 0 -150px;
	border:solid 1px #333;
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	-moz-user-select:none;
	hutia:expression(this.onselectstart=function(){return(false)});  
}
.top {
	background:#CCC;
	line-height:30px;
	width:300px;
	height:30px;
	border-bottom:solid 1px #333;
	cursor:move;
}
.title {
	text-align:center;
	height:30px;
	float:left;
	padding-left:10px;
}
.close {
	display:block;
	float:right;
	padding:0 10px;
	cursor:pointer;
}
.close a {
	color:#00F;
	display:block;
	text-decoration:none;
}
.close a:hover {
	color:#F00;
	text-decoration:underline;
}
.content {
	background:#CCF;
	height:249px;
	padding:10px;
}
.mask {
	background:#000;
	display:none;
	filter:alpha(opacity=50);/*IE*/
	opacity:0.5;/*FF*/
	width:100%;
	height:100%;
	position:fixed;
	_position:absolute;
	top:0;
	left:0;
	z-index:1;
}



js代码// JavaScript Document

//作者：北京→南宫

$(document).ready(function() {
	var dragable = false;
	$('.top').mousedown(function(event) {
		var offset = 0;
		var offsetX = 0;
		var offsetY = 0;
		dragable = true;
		offset = $('.layout_show').offset();
		offsetX = event.clientX - offset.left;
		offsetY = event.clientY - offset.top;
		$(document).mousemove(function(event) {
			if(dragable) {
				$('.layout_show').css({
					margin:0,
					top:event.clientY - offsetY + 'px',
					left:event.clientX - offsetX + 'px'
				});
			}
		})
		//alert(event.clientX);
	}).mouseup(function() {
		dragable = false;
	});
	$('.layout_click').click(function() {
		$('.layout_show , .mask').show();
	});
	$('.close').click(function(){
		$('.layout_show , .mask').hide();
	});
});






mask 为弹出是对页面内容的遮罩。建立一个空白的iframe是为了将select遮挡住，如果仅仅用iframe来遮罩的话，将会存在两个问题。

一、拖拽速度过快的时候将会卡住

二、遮罩的透明色将会是以白色作为透明



解决之道：在iframe之后加上一个同样class为mask的空白div。你可以自己试验一下。



为完成的设想：

当拖拽的时候，弹出层内的文本有可能被选中，我的一个想法是，当鼠标点中的时候，再建一个空白的层，用它来覆盖住有内容的这个层。



2012-4-27 
发现 ie6的遮罩width和height的100%无法满屏bug
我是通过在js中添加以下内容实现满屏效果，但是并未做浏览器滚动条滚动时的处理，暂时只适合一屏幕内容。

	/*--解决ie6不识别遮罩height和width的100% bug（仅针对ie6）--*/
	var ie6 = false;
	if($.browser.msie && $.browser.version == '6.0') {
		ie6 = true;
	}
	if(ie6) {
		
		/*--设置遮罩为窗口的宽高。--*/
		mask.width($(window).width());
		mask.height($(window).height());
	}



下午还是给改为css hack吧。
	width:100%;
	_width:expression((document).documentElement.clientWidth);
	height:100%;
	_height:expression((document).documentElement.clientHeight);


这样基本就无所谓页面大小了。