WEB前端开发学习----11. JQuery 实现简单的拖拽效果

鼠标拖拽效果实现及改进

最新推荐文章于 2025-10-28 04:10:42 发布

原创最新推荐文章于 2025-10-28 04:10:42 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web前端开发 #jquery #javascript

web前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在网页中实现鼠标拖拽效果，并针对快速拖动时的问题提出了解决方案。通过设置三个关键点击事件，即按下鼠标左键、拖动鼠标以及释放鼠标，实现了拖拽控件的位置调整。代码示例展示了如何使用jQuery获取鼠标位置并计算控件的移动距离，最终调整控件的位置。此外，文章还讨论了在不同操作过程中需要注意的细节，如去除鼠标位置和控件位置的单位px，以及如何在鼠标抬起时结束拖动过程。

拖拽效果在网页中很常见。实现起来也不难。记录一下今天实现的简单效果。

拖拽演示

快速拖动时，会出现问题，以后修改.

说白了，就是3个点击事件。

1. 按下鼠标左键，触发点击事件，此时记录下可以得到鼠标相对于拖动控件的位置（当前鼠标位置-控件位置）；

2. 拖动鼠标，触发移动事件，可以计算出鼠标移动的距离（当前鼠标位置-之前算出的相对位置），也就是拖拽控件所移动的距离；

3. 鼠标抬起，结束拖动。

在JQ中，event.pageX event.pageY可以获取鼠标的位置，相对于文档左上角。

如图：

注意，在jq获取控件的位置时：

x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));

要去掉单位px.

但是在修改控件位置时，不要加单位，也不要加引号，也不用加单位px！

dx=event.pageX-x;
dy=event.pageY-y;
//不要加引号！！！
$("#box").css({
"top":dy,"left":dx
})

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>弹出层，移动</title>
	<script src="jq11.js"></script>
	<script>
		//x,y为鼠标离控件左上角的相对位置 
		var x=0;
		var y=0;
		var flag=false;
		$(document).ready(function(){
			$("button").click(function(){
				$("#box").show();
			})
			
			$("h3").mousedown(function(event){
				//判断鼠标左键
				if(event.which==1){
					flag=true;
					
					x=event.pageX-parseInt($("#box").css("left"));
					y=event.pageY-parseInt($("#box").css("top"));
				}
			})

			$("h3").mousemove(function(event){
				if(flag){
					//dx,dy鼠标移动的距离
					var dx=0;
					var dy=0;

					dx=event.pageX-x;
					dy=event.pageY-y;
					//不要加引号！！！
					$("#box").css({
						"top":dy,"left":dx
					})	
				}		
				
			})

			$("h3").mouseup(function(event) {
				flag=false;
			});

			$("span").click(function(){
				$("#box").hide();
				//关闭之后，应返回原来的位置
				$("#box").css({
					top:120,left:120
				})	
			})
		})

	</script>
</head>
<style type="text/css">
	*{margin:0px;
		padding: 0px;}
	body{
		font-size: 14px;
		padding: 100px;
	}
	#box{
		width:500px;
		height:400px;
		border:3px ridge #ccc;
		display: none;
		box-shadow: 2px 2px 20px #888888;
		position:absolute;
		top:120px;
		left:120px;
	}
	#box h3{
		height:30px;
		line-height: 30px;
		background-color: #ABCDEF;
		padding-left: 10px;
		padding-right:10px;
		color: white;
		cursor: move;
	}
	#box span{
		float: right;
		font-size: 12px;
		cursor: pointer;
		color:red;
	}
	#box p{
		height:350px;
		padding: 10px;
		box-shadow: 3px 3px 10px #aaa inset;
		background: #FAFAFA;
	}
</style>
<body>
	<button>弹出</button>
	<div id="box">
		<h3><span>关闭</span>鼠标左键拖动</h3>
		<hr/>
		<p>有点小问题，不能快速的拖动，慢慢拖吧。。。以后有时间修改</p>
		
	</div>
</body>
</html>