html js设置div可拖动效果

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

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

问题：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>

html js设置div可拖动效果

猜你喜欢