js 下div 拖动效果

最新推荐文章于 2024-09-19 11:54:01 发布

阅读量508

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MyJDL/article/details/51935245

版权

</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖动</title>
	<style type="text/css">
		#tuod{
			position: absolute;
			left: 500px;
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		#title{
			margin:0 auto;
			width: 200px;
			height: 20px;
			cursor: pointer;
			background-color: black;
		}
	</style>
	<script type="text/javascript">
		function $getname(name) {
			return document.getElementsByName(name);
		}
		function $getId(Id) {
			return document.getElementById(Id);
		}
		function $getTagname(Tagname) {
			return document.getElementsByTagName(Tagname);
		}

		var MyObj=null;
		var point_x=0;
		var point_y=0;
		document.οnmοusedοwn=function mouseDown(e) {
			//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
			if (e.target.className.indexOf("title")!=-1) {
				MyObj=e.target.offsetParent;
				point_x=e.clientX-MyObj.offsetLeft;//获取当前事件发生点与边框的距离
				point_y=e.clientY-MyObj.offsetTop;
			}
		}
		document.οnmοusemοve=function move_div(e) {
			var Mydiv=$getId("tuod");
			if (MyObj) {
				Mydiv.style.left=(e.clientX-point_x)+'px';
				Mydiv.style.top=(e.clientY-point_y)+'px';
			}
		}
		document.οnmοuseup=function mouseUp() {
			 MyObj=null;
			 point_x=0;
			 point_y=0;
		}

	</script>
</head>
<body>
	<div id="tuod">
		<p class="title" id="title"></p>
		拖动
	</div>
	<span id="weizhi"></span>
</body>
</html>