DIV 拖动效果-阿里云开发者社区

DIV 拖动效果

2015-12-05 1183

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				left: 0px;
				top: 0px;
			}
			
			#box {
				width: 300px;
				height: 300px;
				background: green;
			 
				position: absolute;
			}
			
			#id1 {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100px;
				height: 950px;
				border: 1px solid red;
			}
		</style>
		<script>
			var DOM, oX, oY;

			function tz(dom) {
				DOM = dom;
			}

			function un_tz() {
				DOM = null;
			}
			window.onmousemove = function(e) {
				var eve = e || window.event;
				if (DOM) {
					// 原点不可移动
					if (DOM.offsetLeft < 0 && DOM.offsetTop < 0) {  
						document.getElementById("box").style.left = 1 + "px";
						document.getElementById("box").style.top =  1 + "px";
						document.getElementById("box").style.marginLeft = 1 + "px";
						document.getElementById("box").style. marginTop =  1 + "px";
					}
					DOM.style.left = DOM.offsetLeft + eve.clientX - oX + 'px';
					DOM.style.top = DOM.offsetTop + eve.clientY - oY + 'px';
				}
				oX = eve.clientX;
				oY = eve.clientY;
				document.getElementById("box").innerHTML = "左上角原点相对body远点：(" + DOM.offsetLeft + "," + DOM.offsetTop + ")" + "<br/>" + "鼠标点相对body远点：(" + eve.pageX + "," + eve.pageY + ")" + "<br/>" + "鼠标点相对body远点：(" + eve.clientX + "," + eve.clientY + ")" + "<br/>";
			    document.getElementById("box").innerHTML +="body的大小：("+document.body.scrollWidth  + "," +document.body.scrollHeight+")<br/>" ;
			    document.getElementById("box").innerHTML +="屏幕分辨率：("+window.screen.width   + "," +window.screen.height +")" ;
			}
		</script>
	</head>

	<body>
		<div id="id1">

		</div>
		<div id="box" onmousedown="tz(this);" onmouseup="un_tz();"></div>
	</body>

</html>

DIV 拖动效果

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

DIV 拖动效果

热门文章

最新文章

相关电子书