html或者jsp模块拖拽

最新推荐文章于 2022-10-17 20:30:01 发布

暮辰邪

最新推荐文章于 2022-10-17 20:30:01 发布

阅读量877

点赞数

CC 4.0 BY-SA版权

分类专栏：总结

本文链接：https://blog.youkuaiyun.com/weixin_37623470/article/details/89854937

总结专栏收录该内容

26 篇文章

订阅专栏

博客介绍了将div在页面内拖拽到任意位置，鼠标松开后固定的效果。还给出实现该效果的源码，主要注意点有引入jquery-1.8.2.min.js（任意版本均可），以及设置position: relative; 。

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

将一个div拖拽到当前页面任意位置，鼠标松开之后div固定在松开时的位置。

上面是效果。

下面是源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			.popBox{
				position: relative;
				background: red;
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div class="popBox" >
		</div>
		
		<script type="text/javascript" src="jquery-1.8.2.min.js">	</script>
		<script type="text/javascript">
			function drag(){
				var obj=$('.popBox');
				obj.bind('mousedown',start);
				
				function start(e){
					var ol=obj.position().left;
					var ot=obj.position().top;
					deltaX=e.pageX-ol;
					deltaY=e.pageY-ot;
					
					$(document).bind({
						'mousemove':move,
						'mouseup':stop
					});
					return false;
				}
				
				function move(e){
					obj.css({
						"left":(e.pageX-deltaX),
						"top":(e.pageY-deltaY)
					});
					return false;
				}
				
				function stop(){
					$(document).unbind({
						'mousemove':move,
						'mouseup':stop
					})
				}
			}
			
			drag();
		</script>
	</body>
</html>

主要注意点有两点：

1.引入jquery-1.8.2.min.js（仍以版本都可以）。

2.position: relative;（relative生成相对定位的元素，相对于其正常位置进行定位。relative在轮播时经常被用到）。