DIV 拖拽效果

最新推荐文章于 2023-11-21 14:45:58 发布

最骚的就是你

最新推荐文章于 2023-11-21 14:45:58 发布

阅读量756

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端学习

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/50008551

web前端学习专栏收录该内容

301 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}


		.box {
			width: 300px;
			height: 300px;
			background: green;
			border: solid 1px;
			position: absolute;
		}
	</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) {
				DOM.style.left = DOM.offsetLeft + eve.clientX - oX + 'px';
				DOM.style.top = DOM.offsetTop + eve.clientY - oY + 'px';
			}
			oX = eve.clientX;
			oY = eve.clientY;
		}
	</script>
</head>
<body>
	<div class="box" onmousedown="tz(this);" onmouseup="un_tz();"></div>
</body>
</html>