简单拖拽层

最新推荐文章于 2018-03-26 12:42:56 发布

iteye_8061

最新推荐文章于 2018-03-26 12:42:56 发布

阅读量164

点赞数

分类专栏： JavaScript 文章标签： UP XHTML HTML

JavaScript 专栏收录该内容

5 篇文章

订阅专栏


<!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>
<style type="text/css">
<!--
html {
	height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
}
div#loginDIV {
	position: absolute;
	width: 300px;
	height: 150px;
	background-color: #FFFF00;
	z-index: 20;
}
div#loginTopDIV {
	width: 100%;
	height: 20px;
	background-color: #FF0000;
	cursor: move;
}
-->
</style>
</head>
<body>
<div id="loginDIV" style="top: 200px;left: 300px;display: block;">
  <div id="loginTopDIV">Move</div>
  <p style="text-align: center;">移动的试试</p>
</div>
  <!-- 此段JS必须放在最后面 -->
  <script language="javascript" src="drag.js"></script>
</body>
</html>

drag.js文件


var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
	var event = window.event || e;
	tHeight = event.clientY  - parseInt(loginDIV.style.top.replace(/px/,""));
	lWidth  = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
	document.onmousemove = Move;
	document.onmouseup   = Up;
}
function Move(e) {
	var event = window.event || e;
	var top = event.clientY - tHeight;
	var left = event.clientX - lWidth;
	top = top < 0 ? 0 : top;
	top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
	left = left < 0 ? 0 : left;
	left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
	loginDIV.style.top  = top + "px";
	loginDIV.style.left = left +"px";
}
function Up() {
	document.onmousemove = null;
}