前端---js（自学笔记25)（拖拽练习）

最新推荐文章于 2024-06-05 09:27:58 发布

ABU_MOlI_ITUI

最新推荐文章于 2024-06-05 09:27:58 发布

阅读量179

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/108209662

版权

javaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

拖拽练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: cornflowerblue;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top:100px;
				left: 100px;
			}
		</style>
		<script type="text/javascript">
			window.onload =function(){
				/**
				 * 拖拽box1元素
				 * -拖拽的流程
				 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
				 * 2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
				 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
				 * **/
				//获取box1
				var box1 =document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
				box1.onmousedown =function(){
					//alert("鼠标按下，开始拖拽")
					//为document绑定一个onmousemove事件
					document.onmousemove =function(event){
						event =event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
						//获取鼠标的坐标
						var left =event.clientX;
						var top = event.clientY;
						//修改box1的位置
						box1.style.left =left+"px";
						box1.style.top =top+"px"
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
						//取消document的onmousemove事件
						document.onmousemove =null
						//取消document的onmouseup事件
						document.onmouseup =null
					};
				}
			}
		</script>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
		<div id="box2"></div>
	</body>
</html>

拖拽中，使鼠标位置在图片的任意位置，你点击图片的哪里，图片就出现在哪里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: cornflowerblue;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top:100px;
				left: 100px;
			}
		</style>
		<script type="text/javascript">
			window.onload =function(){
				/**
				 * 拖拽box1元素
				 * -拖拽的流程
				 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
				 * 2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
				 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
				 * **/
				//获取box1
				var box1 =document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
				box1.onmousedown =function(event){
					event = event || window.event;
					//div的偏移量  鼠标.clentX - 元素.offsetLeft
					//div的偏移量  鼠标.clentY - 元素.offsetTop
					var ol =event.clientX - box1.offsetLeft;
					var ot =event.clientY - box1.offsetTop;
					//alert("鼠标按下，开始拖拽")
					//为document绑定一个onmousemove事件
					document.onmousemove =function(event){
						event =event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
						//获取鼠标的坐标
						var left =event.clientX - ol;
						var top = event.clientY- ot;
						//修改box1的位置
						box1.style.left =left+"px";
						box1.style.top =top+"px"
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
						//取消document的onmousemove事件
						document.onmousemove =null
						//取消document的onmouseup事件
						document.onmouseup =null
					};
				}
			}
		</script>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
		<div id="box2"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: cornflowerblue;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top:100px;
				left: 100px;
			}
		</style>
		<script type="text/javascript">
			window.onload =function(){
				/**
				 * 拖拽box1元素
				 * -拖拽的流程
				 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
				 * 2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
				 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
				 * **/
				//获取box1
				var box1 =document.getElementById("box1");
				var box2 =document.getElementById("box2");
				//为box1绑定一个鼠标按下事件
				
				//开启box1的拖拽
				drag(box1);
				//开启box2
				drag(box2)
				
			}
			
			/**
			 * 提取一个专门用来设置拖拽的函数
			 * 参数，开启拖拽的元素
			 * **/
			
			function drag(obj){
				//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
				obj.onmousedown =function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/**
					 * setCapture()
					 * -只有IE支持，但是在火狐中调用时不会报错
					 * 而如果使用chrome调用，会报错
					 * 
					 * **/
//					if(box1.setCapture){
//						box1.setCapture();
//					}
					obj.setCapture && obj.setCapture();
					event = event || window.event;
					//div的偏移量  鼠标.clentX - 元素.offsetLeft
					//div的偏移量  鼠标.clentY - 元素.offsetTop
					var ol =event.clientX - obj.offsetLeft;
					var ot =event.clientY - obj.offsetTop;
					//alert("鼠标按下，开始拖拽")
					//为document绑定一个onmousemove事件
					document.onmousemove =function(event){
						event =event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
						//获取鼠标的坐标
						var left =event.clientX - ol;
						var top = event.clientY- ot;
						//修改box1的位置
						obj.style.left =left+"px";
						obj.style.top =top+"px"
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
						//取消document的onmousemove事件
						document.onmousemove =null
						//取消document的onmouseup事件
						document.onmouseup =null
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture();
					};
					/**
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 * **/
					return false;
				}
			}
		</script>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
		<div id="box2"></div>
	</body>
</html>