jQuery拖动div、移动div、弹出层演示示例

最新推荐文章于 2025-08-18 22:30:00 发布

原创最新推荐文章于 2025-08-18 22:30:00 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #UI #ViewUI

本文提供了一个使用jQuery实现div元素拖动和弹出层展示的示例代码，包括样式定义和交互逻辑。

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

<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>
			jQuery拖动div、移动div、弹出层示例
		</title>
		<script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js" type="text/javascript">
		</script>
		<style type="text/css">
			.moveBar { 
				position: absolute; 
				width: 250px; 
				height: 300px; 
				background: #666; 
				border: solid 1px #000; 
				right: 20px;
			} 
			
			#banner { 
				background: #52CCCC; 
				cursor: move; 
			}
		</style>
	</head>
	<body style="padding-top: 50px;">
		<div class="moveBar">
			<div id="banner">
				按住这里可移动当前div
			</div>
			<div class="content">
				弹出层的正文内容
			</div>
		</div>
		<script>
			
			var moveBar = ".moveBar";
			var banner = "#banner";

			jQuery(document).ready(function() {
				$(banner).mousedown(function(event) {
					var isMove = true;
					var abs_x = event.pageX - $(moveBar).offset().left;
					var abs_y = event.pageY - $(moveBar).offset().top;
					$(document).mousemove(function(event) {
						if (isMove) {
							var obj = $(moveBar);
							obj.css({
								'left': event.pageX - abs_x,
								'top': event.pageY - abs_y
							});
						}
					}).mouseup(function() {
						isMove = false;
					});
				});
			});
		</script>
	</body>

</html>