js之onmousedown实现拖拽效果-控制范围 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
				width: 300px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var div = document.getElementsByTagName('img')[0];
				//按住鼠标移动	mousedown
				div.onmousedown = function(e){
					var ev = window.event || e;
					
					//计算鼠标位置和实际位置 差
					// var a = ev.pageY - this.offsetTop;
					// var b = ev.pageX - this.offsetLeft;
					var sT = document.documentElement.scrollTop || document.body.scrollTop;
					var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
					//ie中page 不允许用	到元素的距离	页面被卷去的高度
					var a = ev.clientY + sT - this.offsetTop;
					//横向没有滚动条，可以不兼容
					var b = ev.clientX + sL - this.offsetLeft;
					//鼠标移动事件	移动过快	mousemove
					// div.onmousemove = function(e){
					document.onmousemove = function(e){
						var ev = window.event || e;
						//获取鼠标位置
						var sT = document.documentElement.scrollTop || document.body.scrollTop;
						var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
						//获取鼠标位置
						// var x = ev.pageX;
						// var y = ev.pageY;
						var x = ev.clientX + sL;
						var y = ev.clientY + sT;
						div.style.left = (x-b) +'px';
						div.style.top = (y-a) +'px';
						return false;//防止拖拽图片和文字出现的bug
					}
				}
				//松开鼠标
				div.onmouseup = function(){
					//取消移动事件
					// div.onmousemove = null;
					document.onmousemove = null;
					
				}
				
				
			}
		</script>
	</head>
	<body>
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586348889091&di=7f1c3c853bcaee2ef9bdd98e87d19be6&imgtype=0&src=http%3A%2F%2Fcdn.wecarepet.net%2Fupload%2Fimage_26_1458374949521.jpeg" alt="t">
	</body>
</html>

控制范围显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			img {
				position: absolute;
				width: 300px;
				height: 200px;
				background-color: red;
			}

			body {
				height: 3000px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				//需求：鼠标按在div上 并移动， div就跟随鼠标移动
				var div = document.getElementsByTagName('img')[0];
				//1 按住鼠标
				div.onmousedown = function(e) {
					var ev = window.event || e;
					//相对于html文档
					// console.log(ev.pageX,ev.pageY)
					//相对于屏幕
					// console.log(ev.clientX,ev.clientY)
					//兼容处理	没有滚动条可以不用
					var sT = document.documentElement.scrollTop || document.body.scrollTop;
					var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
					//计算鼠标位置	差
					var a = ev.clientY + sT - this.offsetTop;
					var b = ev.clientX + sL - this.offsetLeft;
					//ie6- 使用全局捕获解决拖拽问题
					if (this.setCapture) {
						this.setCapture();
					}
					//3 拖动
					document.onmousemove = function(e) {
						var ev = window.event || e;
						//获取鼠标位置
						var sT = document.documentElement.scrollTop || document.body.scrollTop;
						var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
						var x = ev.clientX + sL;
						var y = ev.clientY + sT;
						var dx = x - b;
						var dy = y - a;
						//限制移动区域
						//上
						if (dy <= sT) {
							dy = sT;
						}
						//左
						if (dx <= sL) {
							dx = sL;
						}
						//右
						if (dx >= document.documentElement.clientWidth + sL - div.clientWidth) {
							dx = document.documentElement.clientWidth + sL - div.clientWidth;
						}
						//下
						if (dy >= document.documentElement.clientHeight + sT - div.clientHeight) {
							dy = document.documentElement.clientHeight + sT - div.clientHeight
						}

						//设置位置
						div.style.left = dx + 'px';
						div.style.top = dy + 'px';
						return false; //防止拖拽图片和文字的时候出现的bug
					}
				}
				//抬起鼠标
				div.onmouseup = function() {
					//取消事件
					document.onmousemove = null;
					if (this.releaseCapture) {
						this.releaseCapture(); //释放捕获
					}
				}

			}
		</script>
	</head>
	<body>
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586348889091&di=7f1c3c853bcaee2ef9bdd98e87d19be6&imgtype=0&src=http%3A%2F%2Fcdn.wecarepet.net%2Fupload%2Fimage_26_1458374949521.jpeg">
	</body>
</html>

 

 

posted @ 2020-04-08 21:34  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源