div的拖放(不使用HTML5拖放API)

最新推荐文章于 2023-11-30 08:39:27 发布

King_960725

最新推荐文章于 2023-11-30 08:39:27 发布

阅读量236

点赞数

分类专栏： jQuery JS 文章标签： div拖放

本文链接：https://blog.csdn.net/weixin_42566993/article/details/98362281

版权

JS 同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

要求：div用鼠标点击拖动，松开鼠标div放开(保持兼容)

在这里插入图片描述
这里说一个注意点，谷歌浏览器的scrollTop的获取现在也只能通过html元素了，之前是只能通过body的！

原生JS和jQuery方法

原生JS方法一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div拖放</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: #e74c3c;
			position: absolute;
		}
	</style>
	<script>
		window.onload = function(){
			var div = document.getElementById('box');
			div.onmousedown = function(event){
				div.style.cursor = 'move';
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
				var ol = pageX - div.offsetLeft;
				var ot = pageY - div.offsetTop;
				document.onmousemove = function(event){
					var event = event || window.event;
					var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
					var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
					var targetX = pageX - ol;
					var targetY = pageY - ot;
					div.style.left = targetX + 'px';
					div.style.top = targetY + 'px';
				}
				//这里要使用document来绑定鼠标松开事件，比如在当前div下还设置了
				//一个div，如果当前这个div移动到下面这个蓝色的div上时，
				//鼠标松开是没有用的，因为此时鼠标是在蓝色div上，而不是在当前div上。
				document.onmouseup = function(){
					document.onmousemove = null;
					div.style.cursor = 'default';
				}
			}
		}
	</script>
</head>
<body style="width: 2000px;height: 2000px">
	<div id="box"></div>
	<div style="width: 100px;height: 100px;margin-left: 1000px;background-color: blue;"></div>
</body>
</html>

原生JS方法二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div拖放</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: #e74c3c;
			position: absolute;
		}
	</style>
	<script>
		window.onload = function(){
			var div = document.getElementById('box');
			var ol, ot;
			var flag = false;
			div.onmousedown = function(event){
				div.style.cursor = 'move';
				flag = true;
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
				ol = pageX - div.offsetLeft;
				ot = pageY - div.offsetTop;
			}
			document.onmousemove = function(event){
				if(flag == false){
					return;
				}
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
				var targetX = pageX - ol;
				var targetY = pageY - ot;
				div.style.left = targetX + 'px';
				div.style.top = targetY + 'px';
			}
			document.onmouseup = function(){
				flag = false;
				div.style.cursor = 'default';
			}
		}
	</script>
</head>
<body style="width: 2000px;height: 2000px">
	<div id="box"></div>
</body>
</html>

jQuery方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div拖放</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: #e74c3c;
			position: absolute;
		}
	</style>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var targetX, targetY;
			var isDown = false;
			$("#box").mousedown(function(event){
				isDown = true;
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + $(document).scrollLeft();
				var pageY = event.pageY || event.clientY + $(document).scrollTop();
				targetX = pageX - $("#box").offset().left;
				targetY = pageY - $("#box").offset().top;
				$(this).css({cursor:"move"});
			});
			$(document).mousemove(function(event){
				if(isDown){
					var event = event || window.event;
					var pageX = event.pageX || event.clientX + $(document).scrollLeft();
					var pageY = event.pageY || event.clientY + $(document).scrollTop();
					var left = pageX - targetX;
					var top = pageY - targetY;
					$("#box").css({
						left:left,
						top:top
					});
				}
			}).mouseup(function(){
				isDown = false;
				$("#box").css({cursor:"default"});
			});
		});
	</script>
</head>
<body style="width: 2000px;height: 2000px;">
	<div id="box"></div>
</body>
</html>