html js设置div可拖动效果

灰太狼 2022-03-17 12:52 632阅读 0赞

**第一种：先看代码，可直接复制使用。**

这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。

**问题：**js设置div可拖动效果  当我在实际项目中使用时，div里有关闭div的按钮，很多时候点击按钮，关闭事件不触发，反而div会移动。因为该div是js动态生成了，我尝试使用阻止冒泡事件来解决这个问题，但是不起作用。于是换了另一种方式。如下第二种

<!doctype html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
    	<title>拖拽</title>
    	<style>
    	#div{
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		background: black;}
    	</style>
    </head>
    <body>
    	<div id="div"></div>	
    	<script>
    	function move(){
    		var divMove = document.getElementById("div");
    		if(divMove == null) return;
    		divMove.onmousedown  = function(e){
    			var ev = e || window.event;  //兼容ie浏览器
    			//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离  
    			var distanceX = ev.clientX - div.offsetLeft;
    			var distanceY = ev.clientY - div.offsetTop;
    			document.onmousemove = function(e){
    				var ev = e || window.event;  //兼容ie浏览器  
    				divMove.style.left = ev.clientX - distanceX + 'px';
    				divMove.style.top = ev.clientY - distanceY + 'px'; 
    			};
    			document.onmouseup = function(){
    				document.onmousemove = null;
    				document.onmouseup = null;
    			};
    		};
    	}
    	move();
    	</script>
    </body>
    </html>

2、第二种：更优雅点。拖拽div时，div透明度会降低，放开时，div恢复原来样式

<!doctype html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
    	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    	<title>拖拽</title>
    	<style>
    	#div{
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		background: black;}
    	</style>
    </head>
    <body>
    	<div id="div"></div>	
    	<script>
    	function move(){
    		var _move=false;//移动标记  
    		var _x,_y;//鼠标离控件左上角的相对位置  
    		$("#div").click(function(){  
    			//alert("click");//点击（松开后触发）  
    			}).mousedown(function(e){  
    			_move=true;  
    			_x=e.pageX-parseInt($("#div").css("left"));  
    			_y=e.pageY-parseInt($("#div").css("top"));  
    			$("#div").fadeTo(20, 0.5);//点击后开始拖动并透明显示  
    		});  
    		$(document).mousemove(function(e){  
    			if(_move){  
    				var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
    				var y=e.pageY-_y;  
    				$("#div").css({top:y,left:x});//控件新位置  
    			}  
    		}).mouseup(function(){  
    		_move=false;  
       	 	$("#div").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  "fast":规定褪色效果的速度。
      		});  
    	}
    
    	move();
    	</script>
    </body>
    </html>