jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原、窗口置顶

最新推荐文章于 2023-05-09 15:27:21 发布

LDIA

最新推荐文章于 2023-05-09 15:27:21 发布

阅读量1.4k

点赞数 4

文章标签： jquery css

本文链接：https://blog.csdn.net/qq_37048654/article/details/113182357

版权

这篇博客介绍了如何利用jQuery实现div窗口的拖动移动、点击最大化/还原、拖动调整大小以及窗口置顶等功能。通过拖动标题可以移动窗口，点击最大化按钮能切换窗口的大小状态，窗口四周的10*10区域支持拖动改变窗口尺寸，同时在窗口操作时能自动置顶显示。

摘要由CSDN通过智能技术生成

jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原、窗口自动置顶

- 图例
- 实现

图例

1、拖动标题来移动窗口（红框方案）:

在这里插入图片描述其他样式，如：

2、最大化:
在这里插入图片描述
点击后最大化按钮变成还原按钮，可以还原窗口。

3、关闭

4、拖动改变窗口大小：
在这里插入图片描述
该10*10区域可拖动改变窗口大小

5、移动或点击窗口时，自动置顶窗口

实现

只需将引入的jquery路径修改即可使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="myMoveItem" style="top:10px;left:10px;">
			<div class="moveItem_header">
				<p class="moveItem_title" onselectstart="return false">标题1</p>
				<div class="moveItem_oper">
					<button type="button" class="moveItem_fullScreen"><></button>
					<button type="button" class="moveItem_normalScreen">><</button>
					<button type="button" class="moveItem_close">X</button>
				</div>
			</div>
			<div class="moveItem_body" style="background-color: #FFF;height: calc(100% - 57px);">
				<p>测试1</p>
			</div>
			<span class="moveItem_resize"></span>
		</div>
		
		<div class="myMoveItem" style="top:150px;left:180px">
			<div class="moveItem_header">
				<p class="moveItem_title" onselectstart="return false">标题2</p>
				<div class="moveItem_oper">
					<button type="button" class="moveItem_fullScreen"><></button>
					<button type="button" class="moveItem_normalScreen">><</button>
					<button type="button" class="moveItem_close">X</button>
				</div>
			</div>
			<div class="moveItem_body">
				<p>测试2</p>
			</div>
			<div class="moveItem_footer">
				<button type="button" class="moveItem_do">确定</button>
				<button type="button" class="moveItem_cancel">取消</button>
			</div>
			<span class="moveItem_resize"></span>
		</div>

	</body>
</html>
<style type

最低0.47元/天解锁文章

LDIA

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原、窗口置顶

jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原图例实现图例1、拖动标题来移动窗口（红框方案）:2、最大化:点击后最大化按钮变成还原按钮，可以还原窗口。3、关闭4、拖动改变窗口大小：该10*10区域可拖动改变窗口大小。实现只需将引入的jquery路径修改即可使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title
复制链接

扫一扫