鼠标拖动div层

最新推荐文章于 2024-09-16 23:05:35 发布

装逼之王

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： div function xhtml ie html 文档

本文链接：https://blog.csdn.net/qingchuninfo/article/details/6932314

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天没什么工作，想着复习下js中获取元素的位置属性的东西，这些地方我一直很混乱，分不清，今天学习了下，写了个鼠标拖动div层的例子（目前只能在ie下运行），ff下获取事件源跟鼠标坐标的方式跟ie不同，有时间学习下ff下的这些东西。

<!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=gb2312" />
<title>无标题文档</title>
<style type = "text/css">
	*{
		margin:0;
		padding:0;
		overflow:hidden;
	}
	#rect{
		height:30px;
		width:200px;
		line-height:30px;
		background-color:#dfdfdf;
		text-align:center;
		border:solid 1px #ccc;
		position:absolute;
		top:2;
		left:2;
		cursor:move;

	
	}

</style>
</head>

<body>
	<div id = "rect">
		Hello 青春华航！	
	</div>




<script type = "text/javascript">
var client_width = document.body.clientWidth;

var flag = false;
var obj_rect = document.getElementById("rect");

var cx = 0;
var cy = 0;
function mov(){
	if(flag){
		ev = window.event;
		obj_rect.style.top = ev.clientY - cy + "px";
		obj_rect.style.left = ev.clientX - cx + "px";
	}


}
function d(){
	var ev = window.event;
	var l = obj_rect.offsetLeft;
	var r = l + 200;
	var t = obj_rect.offsetTop;
	var wn = t + 30;
	m_x = ev.clientX;
	m_y = ev.clientY;
	if(((m_x > l) && (m_x <r)) && ((m_y > t) && (m_y < wn))){
		cx = m_x -l;
		cy = m_y -t;
		flag = true;
	
	
	}
	
}
function u(){
	flag = false;
}



document.onmousemove = mov;
document.onmousedown = d;
document.onmouseup = u;
</script>
</body>
</html>