jquery和javascript两种实现浮动窗口的拖拽效果(参照网上资料以及韩顺平老师讲解)

本文链接：https://blog.youkuaiyun.com/jimolangge123/article/details/42142715

本文介绍了如何使用jQuery和JavaScript分别实现浮动窗口的拖拽功能。jQuery方法简单易用，而JavaScript实现提供了另一种实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="./css/drag.css" type="text/css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="./js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function(){
		$("#div1").mousedown(function(e){
			_move = true;
			_x=e.pageX-parseInt($("#div1").css("left"));   //获得鼠标相对于div1的x坐标的位置
	                _y=e.pageY-parseInt($("#div1").css("top"));    //获得鼠标相对于div1的y坐标的位置
	        $("#div1").fadeTo(20, 0.25);//点击后开始拖动并透明显示
		});
		
		 $(document).mousemove(function(e){
		        if(_move){
		            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
		            var y=e.pageY-_y;
		            $("#div1").css({top:y,left:x});//控件新位置
		        }
		    }).mouseup(function(){
		    _move=false;
		    $("#div1").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
		});
	});
</script>
</head>
<body>
<div id="div1">支持拖拽</div>
</body>
</html>

这是使用jquey实现，使用此种方式实现比较简单一些

还有就是使用javascript去实现拖拽效果，具体实现如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="./css/drag.css" type="text/css" rel="stylesheet">
<script type="text/javascript" >
	var x = 0 ,y = 0;
	var x1 = 0 ,y1 = 0;
	var moveable = false ;
	var index = 20000;
	
	function startDrag(obj,evt){
		e = evt ? evt :window.event ;	//主要是兼容问题
		if(!window.captureEvents()){
			obj.setCapture();    //设置属于当前对象的鼠标捕获，在IE中能够正常使用，但是在FireFox下无法使用 
		}else{
			//解决FirFox下不兼容问题
			window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP );
		}
		var win = obj.parentNode ;
		win.style.zIndex = ++index;
		x = e.clientX - parseInt(win.style.left);
		y = e.clientY - parseInt(win.style.top);
		moveable = true;
	}
	
	function drag(obj,evt){
		e = evt? evt : window.event ;
		if(moveable){
			var win = obj.parentNode ;
			
			x1 = e.clientX -x;
			y1 = e.clientY - y;
			win.style.left = x1 ;
			win.style.top = y1 ;
			
		}
	}
	
	function stopDrag(obj){
		if(moveable){
			if(!window.captureEvents()){
				obj.releaseCapture();
			}else{
				window.releaseCapture(Event.MOUSEMOVE | Event.MOUSEUP);
			}
			moveable = false ;
		}
	}
	
</script>
</head>
<body>
<div id="div2" style="position: absolute; width: 200px;height: 200px;top: 100px;left: 153px;background-color: silver;">
	<div id="title" style="position: absolute;width: 200px;height: 25px;background-color: green; cursor: hand" οnmοusedοwn="startDrag(this,event)"
	 οnmοusemοve="drag(this,event)" οnmοuseup="stopDrag(this)">浮动窗口</div>
</div>
</body>
</html>