JavaScript实现鼠标拖拽案例

鼠标拖拽

本案例的目的是使用JavaScript实现简单的鼠标拖拽元素。
直接附上全部代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: #FFD700;
				position: absolute;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box">box</div>
		
		<script type="text/javascript">
			var box = document.querySelector('#box');
			
			box.addEventListener('mousedown',function (e) {
				//兼容写法:
				e = e || window.event
				//获取鼠标的位置
				var disx = e.offsetX
				var disy = e.offsetY
				
				function fn(e) {
					e = e || window.event
					var left = e.clientX - disx
					var top = e.clientY - disy
					
					//限定盒子最大移动范围:
					var max_left = document.body.offsetWidth - box.offsetWidth	
					var max_top = window.innerHeight - box.offsetHeight
					
					//限定边界:
					left = left <= 0 ? 0 : left; 	//左边界
					left = left >= max_left ? max_left : left;	//右边界
					top = top <= 0 ? 0 : top;	//上边界
					top = top >= max_top ? max_top : top;	//下边界
					
					//盒子在页面中的运动位置
					box.style.left = left + 'px';
					box.style.top = top + 'px';
				}
				
				//给盒子添加鼠标移动事件,但是需要加在document上面,如果加在box上面会造成鼠标移动太快,而超出box边界,导致box跟不上
				document.addEventListener('mousemove',fn)
				
				//鼠标抬起的时候盒子不应该在跟着鼠标移动,因此需要移除鼠标移动事件
				document.addEventListener('mouseup',function (){
					document.removeEventListener('mousemove',fn)	//移除鼠标移动事件
				})
				
				//清除默认行为,当盒子当中有内容的时候,如果双击盒子,会默认选中盒子中的内容,此时移动盒子移动的是盒子的内容,而无法移动盒子
				if (e.preventDefault){
					e.preventDefault()
				}else{
					return false;
				}
			})
		</script>
	</body>
</html>

需要注意的点:
在获取最大高度max_top的时候不能使用document.body.offsetTop来获取,而应该使用window.innerHetght,至于原因,我们可以直接输出document.body.offsetTop来看看他的值就知道了。

你可能感兴趣的:(JavaScript)