简易拖拽以及bug的修复

最新推荐文章于 2022-12-13 22:35:02 发布

森林中的小屋

最新推荐文章于 2022-12-13 22:35:02 发布

阅读量938

点赞数

分类专栏： Web基础 js基础文章标签：移动 bug javascript 拖拽鼠标指针事件

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/52797752

版权

Web基础同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

js基础

11 篇文章 0 订阅

订阅专栏

1、拖拽的实现

我们将实现一个盒子在屏幕窗口随着鼠标按下跟随者鼠标指针移到，当鼠标松开将会静止不动；若再按下又可移动盒子。我们先准备盒子，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 200px;height: 200px;background: cornflowerblue;position: absolute;}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

js代码：

			<script>
			window.onload = function() {
				var oBox = document.getElementById('box');

				var DisX = 0;
				var DisY = 0;

				oBox.onmousedown = function(ev) {
					var oEvent = ev || event;

					DisX = oEvent.clientX - oBox.offsetLeft;
					DisY = oEvent.clientY - oBox.offsetTop;

					oBox.onmousemove = function(ev) {
						var oEvent = ev || event;

						oBox.style.left = oEvent.clientX - DisX + 'px';
						oBox.style.top = oEvent.clientY - DisY + 'px';
					};
				};
			};
		</script>

2、修复bug

在上面我们已经可以把盒子进行拖动了，但是有没有发现盒子拖动之后就一直跟着指针移动，停不下来了，我们来处理下这个问题。

                                     oBox.οnmοuseup=function  () {
						oBox.οnmοusedοwn=null;
						oBox.οnmοusemοve=null;
					};

我们在后面加了一个函数，就是在鼠标拖动之后将前面的两个函数置为null，那么就不会在鼠标松开之后在随着鼠标移动了。但是又有一个问题就是只能移动一次，像再次拖动盒子就不能了，是因为我们已经把前面两个事件都已经取消了，所以移动不了了，我们在改改，将下面有[1]后面的oBox改了，改为document。

		<script>
			window.onload = function() {
				var oBox = document.getElementById('box');

				var DisX = 0;
				var DisY = 0;

				oBox.onmousedown = function(ev) {
					var oEvent = ev || event;

					DisX = oEvent.clientX - oBox.offsetLeft;
					DisY = oEvent.clientY - oBox.offsetTop;

				 [2]oBox.onmousemove = function(ev) {
						var oEvent = ev || event;

						oBox.style.left = oEvent.clientX - DisX + 'px';
						oBox.style.top = oEvent.clientY - DisY + 'px';
					};
				 [1]oBox.onmouseup = function() {
					 [1]oBox.onmousedown = null;
					 [2]oBox.onmousemove = null;
					};
				};
			};
		</script>

改好之后就可以正常的移动盒子了。但是有时候我们鼠标不避免会移动得很快，那问题就又出现了，当鼠标指针移到过快，盒子就会脱离指针，可以说成盒子移动的速度跟不上指针移动的速度，为什么会造成这个现象呢？我们可以想象我们现在要拖动盒子，但是鼠标指针的作用域就在盒子上面，如果我们把作用域变大，那么就是不是可以解决问题了。那就需要把上面有[2]的两个对象元素oBox也改为document，现在就可以实现盒子的拖动了。

现在我们就可以很好的移动盒子了，但是在往下拖动的时候，就有一个不美观的状态了，因为屏幕往下移动了，鼠标指针的参数超过了第一屏的大小了，所以就有不美观，那我们可以把盒子能移动得范围定在可视区域范围内，改变的代码如下：

		<script>
			window.onload = function() {
				var oBox = document.getElementById('box');

				var DisX = 0;
				var DisY = 0;

				oBox.onmousedown = function(ev) {
					var oEvent = ev || event;

					DisX = oEvent.clientX - oBox.offsetLeft;
					DisY = oEvent.clientY - oBox.offsetTop;

					document.onmousemove = function(ev) {
						var oEvent = ev || event;
						var left = oEvent.clientX - DisX
						var top = oEvent.clientY - DisY

						if(left < 0) {
							left = 0
						} else if(left > document.documentElement.clientWidth - oBox.offsetWidth) {
							left = document.documentElement.clientWidth - oBox.offsetWidth;
						}
						if(top < 0) {
							top = 0;
						} else if(top > document.documentElement.clientHeight - oBox.offsetHeight) {
							top = document.documentElement.clientHeight - oBox.offsetHeight;
						}
						oBox.style.top = top + 'px';
						oBox.style.left = left + 'px';
					}
					document.onmouseup = function() {
						document.onmousedown = null;
						document.onmousemove = null;
					};
					return false;
				};
			};
		</script>

在上面添加 return false，处理某些浏览器的兼容性问题。

森林中的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易拖拽以及bug的修复

1、拖拽的实现我们将实现一个盒子在屏幕窗口随着鼠标按下跟随者鼠标指针移到，当鼠标松开将会静止不动；若再按下又可移动盒子。我们先准备盒子，代码如下： #box{width: 200px;height: 200px;background: cornflowerblue;position: absolute;} js代码：
复制链接

扫一扫