使用jQuery实现div可拖拽功能

最新推荐文章于 2023-09-26 09:55:35 发布

原创最新推荐文章于 2023-09-26 09:55:35 发布 · 819 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript #jquery

前端开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用jQuery实现div元素的拖拽功能，通过示例代码和效果图展示具体实现步骤。

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{margin: 0;padding: 0;}
	body{height: 100%;font-size: 14px;}
	.left-column{position: absolute;left: 0;right: 330px;height: 100%;
			margin-top: -2px;border: 1px solid red;background: #eee;}
	.detail{position: absolute;top: 80px;left: 80px;width: 250px;
			height: 30px;background: #333;border-radius:8px 8px 0 0;}
	.box{position: absolute;top: 20px;left: 0;width: 360px;
			height: 280px;background: #333;border-radius:8px;padding: 10px;}
  </style>
  <script src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
	$(function(){
		$(".drag-box").mousedown(function(e){
			//改变鼠标的形状
			$(this).css("cursor","move");

			//获取div元素的位置
			var offset = $(this).offset();
			
			//获取鼠标元素相对div的偏移量
			var x = e.pageX - offset.left;
			var y = e.pageY - offset.top;

			/*鼠标键按下时，添加mousemove事件绑定*/
			$(document).bind("mousemove",function(ev){
				//$(".drag-box").stop(); //可防止使用jquery时的效果混乱现象
				var xOffset = ev.pageX - x;
				var yOffset = ev.pageY - y;

				//方法一：jquery
				//$(".drag-box").animate({left:xOffset,top:yOffset},10);

				//方法二：原生js
				$(".drag-box").css("left", xOffset);
				$(".drag-box").css("top", yOffset);
			});			
		});

		/*鼠标键按起时，取消mousemove事件绑定*/
		$(document).mouseup(function(){
			$(this).css("cursor","default");
			$(this).unbind("mousemove");
		});
	})
  </script>
 </head>
 <body>
  <div class="left-column">
	<div class="detail drag-box">
		<div class="box"></div>
	</div>
  </div>
  <div class="right-column"></div>
 </body>
</html>