可拖动div（2）

最新推荐文章于 2024-08-03 13:05:28 发布

crystal徐

最新推荐文章于 2024-08-03 13:05:28 发布

阅读量170

点赞数

分类专栏： html div 拖放文章标签： html div 拖动 css

本文链接：https://blog.csdn.net/weixin_37831477/article/details/79629645

版权

html 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

div

2 篇文章 0 订阅

订阅专栏

拖放

2 篇文章 0 订阅

订阅专栏

今天学了另一中可拖动div，比之前的代码少，用起来简单，并且加入样式，看起来更像一个弹出框，当然了，颜色如果不喜欢可以再调。复制进去，尝试一下就知道啦。这种方式可以套用到很多div。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>可拖动div</title>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
	rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<style type="text/css">
#container_show_message {
	position: absolute;
	float: left;
	width: 47%;
	height: 70%;
	background-color: rgba(227, 222, 230, 0.55);
	left: 282px;
	top: 187px;
	border-radius: 7px;
	box-shadow: rgb(105, 91, 91) 0px 0px 20px;
}

.move_bar {
	background-color: #42A5F5;
	height: 35px;
	border-radius: 7px;
	font-size: 18px;
	padding-left: 9px;
	padding-top: 5px;
	font-family: Arial;
	box-shadow: rgb(105, 91, 91) 0px 0px 7px;
}

.close {
	width: 40px;
}
</style>
</head>
<body style="padding-top: 50px;">
	<div id="container_show_message">
		<div class="move_bar">
			按住此处移动当前div
			<button type="button" class="close" aria-hidden="true">
				×</button>
		</div>

		<div id="3D_Scatter"></div>
	</div>

	<script>
		$(".move_bar").mousedown(function(event) {
			$(this).css("cursor", "move");//改变鼠标指针的形状
			var move_id = "#" + $(this).parent().attr("id");
			var isMove = true;
			var abs_x = event.pageX - $(move_id).offset().left;
			var abs_y = event.pageY - $(move_id).offset().top;
			$(document).mousemove(function(event) {
				if (isMove) {
					var obj = $(move_id);
					obj.css({
						'left' : event.pageX - abs_x,
						'top' : event.pageY - abs_y
					});
				}
			}).mouseup(function() {
				$(".move_bar").css("cursor", "default");
				isMove = false;
			});
		});
	</script>
</body>
</html>

crystal徐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可拖动div（2）

今天学了另一中可拖动div，比之前的代码少，用起来简单，并且加入样式，看起来更像一个弹出框，当然了，颜色如果不喜欢可以再调。复制进去，尝试一下就知道啦。这种方式可以套用到很多div。&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/ht...
复制链接

扫一扫

专栏目录