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

「爱情、让人受尽委屈。」 2022-11-30 14:28 146阅读 0赞

### 拖拽练习 ###

![20200824215046694.gif][]

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

<!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>

![20200825123531589.gif][]

[20200824215046694.gif]: /images/20221123/5fda113af6d44e79a66819b1baff2651.png
[20200825123531589.gif]: /images/20221123/bc030dc0f4eb4e3ebfd5faa6c651b7a9.png