JS_基础_拖拽

最新推荐文章于 2024-10-16 17:24:41 发布

星猿意码

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量123

点赞数

分类专栏：前端JS 文章标签： js javascript jquery css html

本文链接：https://blog.csdn.net/a1787882124/article/details/107642374

版权

前端JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js_基础_拖拽

<!DOCHTML HTML>
<html>
   <head>
   	   <meta charset="utf-8">
   	   <title>拖拽</title>
   	   <style type="text/css">
   	   	  #box1{
   	   	  	width: 100px;
   	   	  	height: 100px;
   	   	  	background-color: yellow;
   	   	  	position: absolute;
   	   	  }
   	   	  #box2{
   	   	  	width: 100px;
   	   	  	height: 100px;
   	   	  	background-color: red;
   	   	  	position: absolute;
   	   	  	left: 200px;
   	   	  	top:200px;
   	   	  }
   	   </style>
   	   <script type="text/javascript">
   	   	   window.onload = function(){
   	   	   	   /*
                 拖拽box1元素
                  - 拖拽的流程
                    1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
                    2.当鼠标移动时，被拖拽元素跟着鼠标移动，onmousemove
                    3.当鼠标松开时，被拖拽元素固定在当前位置，onmouseup
   	   	   	   */
   	   	   	   //获取拖拽对象
   	   	   	   var box1 = document.getElementById("box1");
   	   	   	   //为box1绑定按下的事件
   	   	   	   box1.onmousedown = function(event){
                 
                 //兼容ie8
   	   	   	   	 box1.setCapture && box1.setCapture();
                 //div的偏移量 鼠标.clientX - 元素.offsetLeft
                 //div的偏移量 鼠标.clientY - 元素.offsetTop
                   event = event || window.event;

                   var ol = event.clientX - box1.offsetLeft;
                   var ot = event.clientY - box1.offsetTop;

 

                  document.onmousemove = function(event){
                  	event = event || window.event;
                  	//获取元素的坐标
                  	var left = event.clientX - ol;
                  	var top = event.clientY - ot;
                  	//修改box1的位置
                  	box1.style.left = left + "px";
                  	box1.style.top = top + "px";
                  };
                  document.onmouseup = function(){
                  	document.onmousemove = null;
                  	document.onmouseup = null;

                  	box1.releaseCapture && box1.releaseCapture();
                  };
                  //取消浏览器默认行为,对ie8不起作用
                  return false;
   	   	   	   };

   	   	   	    var box2 = document.getElementById("box2");
   	   	   	   //为box1绑定按下的事件
   	   	   	   box2.onmousedown = function(event){
                 
                 //兼容ie8
   	   	   	   	 box2.setCapture && box2.setCapture();
                 //div的偏移量 鼠标.clientX - 元素.offsetLeft
                 //div的偏移量 鼠标.clientY - 元素.offsetTop
                   event = event || window.event;

                   var ol = event.clientX - box2.offsetLeft;
                   var ot = event.clientY - box2.offsetTop;

 

                  document.onmousemove = function(event){
                  	event = event || window.event;
                  	//获取元素的坐标
                  	var left = event.clientX - ol;
                  	var top = event.clientY - ot;
                  	//修改box1的位置
                  	box2.style.left = left + "px";
                  	box2.style.top = top + "px";
                  };
                  document.onmouseup = function(){
                  	document.onmousemove = null;
                  	document.onmouseup = null;

                  	box2.releaseCapture && box2.releaseCapture();
                  };
                  //取消浏览器默认行为,对ie8不起作用
                  return false;
   	   	   	   };
   	   	   };
   	   </script>
   </head>
   <body>
   	   
       <div id="box1"></div>
   	   <div id="box2"></div>
   </body>
</html>