JS--拖拽对话框

<style>
*{
	padding: 0;
	margin: 0;
}
a{
	font-size: 40px;
	display: block;
	text-align: center;
}
#box{
	width: 400px;
	height: 300px;
	border: 1px solid red;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
	z-index: 99;
	display: none;
}
p{
	position: relative;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: goldenrod;
	cursor: all-scroll;
}
span{
	position: absolute;
	right: 10px;
	color: #fff;
	cursor: pointer;
}
#box div{
	line-height: 250px;
	text-align: center;
	background-color: #fff;
}
#zheDang{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.4;
	z-index: 9;
	display: none;
}
</style>

<a id="a" href="http://www.baidu.com">点击弹出内容</a>
<div id="box">
	<p id="title">拖拽区
		<span id="close">X</span>
	</p>
	<div>内容区</div>
</div>

<div id="zheDang"></div>
<script>
function my$(id){
	return document.getElementById(id);
}

//点击a标签弹出遮挡层和弹出框，并阻止默认跳转事件
my$("a").onclick = function(e){
	my$("zheDang").style.display = "block";
	my$("box").style.display = "block";
	//阻止事件冒泡
	//window.event.cancelBubble ? window.event.cancelBubble : e.stopPropagation();
	return false;//阻止默认事件
}

//点击页面任意一处，弹框隐藏
//document.onclick = function(){//会有事件冒泡
//	my$("zheDang").style.display = "none";
//	my$("box").style.display = "none";
//}

//点击span隐藏弹出框
my$("close").onclick = function(){//会有事件冒泡
	my$("zheDang").style.display = "none";
	my$("box").style.display = "none";
}

//在p标签范围按住鼠标拖拽弹出框
my$("title").onmousedown = function(e){
	//鼠标按下的横坐标到弹出框左边的距离
	var spaceX = evt.getClientX(e) - my$("box").offsetLeft - 200;//需要加上弹出框的marginLeft值
	//鼠标按下的纵坐标到弹出框上边的距离
	var spaceY = evt.getClientY(e) - my$("box").offsetTop - 150;//需要加上弹出框的marginTop值
	
	//鼠标移动事件，在整个文档中移动
	document.onmousemove = function(e){
		//移动后弹出框的left值
		var x = evt.getClientX(e) - spaceX;
		//移动后弹出框的top值
		var y = evt.getClientY(e) - spaceY;
		
		my$("box").style.left = x + "px";
		my$("box").style.top = y + "px";
	}
}
//鼠标抬起事件，在整个文档中抬起,移动事件结束
document.onmouseup = function(){
	document.onmousemove = null;
}

//把兼容代码放在一个对象中
var evt = {
	//window.event和e的兼容代码
	getEvent: function(e){
		return window.event ? window.event : e;
	},
	//滚动条向右卷曲出去的距离
	getScrollLeft: function(){
		return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
	},
	//滚动条向上卷曲出去的距离
	getScrollTop: function(){
		return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
	},
	//可视区域的横坐标兼容代码
	getClientX: function(e){
		return this.getEvent(e).clientX;
	},
	//可视区域的纵坐标兼容代码
	getClientY: function(e){
		return this.getEvent(e).clientY;
	},
	//pageX和clientX + offsetLeft的兼容代码
	getPageX: function(e){
		return this.getEvent(e).pageX ? this.getEvent(e).pageX : this.getClientX(e) + this.getScrollLeft();
	},
	//pageY和clientY + offsetTop的兼容代码
	getPageY: function(e){
		return this.getEvent(e).pageY ? this.getEvent(e).pageY : this.getClientY(e) + this.getScrollTop();
	}
}
</script>