前端原生demo —— 能从8个方向拖拽并改变窗口大小

最新推荐文章于 2024-01-12 16:48:52 发布
最新推荐文章于 2024-01-12 16:48:52 发布
阅读量2.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40137978/article/details/107105576
版权

示例图如下:

在这里插入图片描述

参考代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(img/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(img/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(img/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type="text/javascript">
/*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
var get = {
	byId: function(id) {
		return typeof id === "string" ? document.getElementById(id) : id
	},
	byClass: function(sClass, oParent) {
		var aClass = [];
		var reClass = new RegExp("(^| )" + sClass + "( |$)");
		var aElem = this.byTagName("*", oParent);
		for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
		return aClass
	},
	byTagName: function(elem, obj) {
		return (obj || document).getElementsByTagName(elem)
	}
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
  拖拽函数
 +-------------------------- */
function drag(oDrag, handle)
{
	var disX = dixY = 0;
	var oMin = get.byClass("min", oDrag)[0];
	var oMax = get.byClass("max", oDrag)[0];
	var oRevert = get.byClass("revert", oDrag)[0];
	var oClose = get.byClass("close", oDrag)[0];
	handle = handle || oDrag;
	handle.style.cursor = "move";
	handle.onmousedown = function (event)
	{
		var event = event || window.event;
		disX = event.clientX - oDrag.offsetLeft;
		disY = event.clientY - oDrag.offsetTop;
		
		document.onmousemove = function (event)
		{
			var event = event || window.event;
			var iL = event.clientX - disX;
			var iT = event.clientY - disY;
			var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
			var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
			
			iL <= 0 && (iL = 0);
			iT <= 0 && (iT = 0);
			iL >= maxL && (iL = maxL);
			iT >= maxT && (iT = maxT);
			
			oDrag.style.left = iL + "px";
			oDrag.style.top = iT + "px";
			
			return false
		};
		
		document.onmouseup = function ()
		{
			document.onmousemove = null;
			document.onmouseup = null;
			this.releaseCapture && this.releaseCapture()
		};
		this.setCapture && this.setCapture();
		return false
	};	
	//最大化按钮
	oMax.onclick = function ()
	{
		oDrag.style.top = oDrag.style.left = 0;
		oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
		oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
		this.style.display = "none";
		oRevert.style.display = "block";
	};
	//还原按钮
	oRevert.onclick = function ()
	{		
		oDrag.style.width = dragMinWidth + "px";
		oDrag.style.height = dragMinHeight + "px";
		oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
		oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
		this.style.display = "none";
		oMax.style.display = "block";
	};
	//最小化按钮
	oMin.onclick = oClose.onclick = function ()
	{
		oDrag.style.display = "none";
		var oA = document.createElement("a");
		oA.className = "open";
		oA.href = "javascript:;";
		oA.title = "还原";
		document.body.appendChild(oA);
		oA.onclick = function ()
		{
			oDrag.style.display = "block";
			document.body.removeChild(this);
			this.onclick = null;
		};
	};
	//阻止冒泡
	oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
	{
		this.onfocus = function () {this.blur()};
		(event || window.event).cancelBubble = true	
	};
}
/*-------------------------- +
  改变大小函数
 +-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
	handle.onmousedown = function (event)
	{
		var event = event || window.event;
		var disX = event.clientX - handle.offsetLeft;
		var disY = event.clientY - handle.offsetTop;	
		var iParentTop = oParent.offsetTop;
		var iParentLeft = oParent.offsetLeft;
		var iParentWidth = oParent.offsetWidth;
		var iParentHeight = oParent.offsetHeight;
		
		document.onmousemove = function (event)
		{
			var event = event || window.event;
			
			var iL = event.clientX - disX;
			var iT = event.clientY - disY;
			var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
			var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;			
			var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
			var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
			
			isLeft && (oParent.style.left = iParentLeft + iL + "px");
			isTop && (oParent.style.top = iParentTop + iT + "px");
			
			iW < dragMinWidth && (iW = dragMinWidth);
			iW > maxW && (iW = maxW);
			lockX || (oParent.style.width = iW + "px");
			
			iH < dragMinHeight && (iH = dragMinHeight);
			iH > maxH && (iH = maxH);
			lockY || (oParent.style.height = iH + "px");
			
			if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
			
			return false;	
		};
		document.onmouseup = function ()
		{
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	}
};
window.onload = window.onresize = function ()
{
	var oDrag = document.getElementById("drag");
	var oTitle = get.byClass("title", oDrag)[0];
	var oL = get.byClass("resizeL", oDrag)[0];
	var oT = get.byClass("resizeT", oDrag)[0];
	var oR = get.byClass("resizeR", oDrag)[0];
	var oB = get.byClass("resizeB", oDrag)[0];
	var oLT = get.byClass("resizeLT", oDrag)[0];
	var oTR = get.byClass("resizeTR", oDrag)[0];
	var oBR = get.byClass("resizeBR", oDrag)[0];
	var oLB = get.byClass("resizeLB", oDrag)[0];
	
	drag(oDrag, oTitle);
	//四角
	resize(oDrag, oLT, true, true, false, false);
	resize(oDrag, oTR, false, true, false, false);
	resize(oDrag, oBR, false, false, false, false);
	resize(oDrag, oLB, true, false, false, false);
	//四边
	resize(oDrag, oL, true, false, false, true);
	resize(oDrag, oT, false, true, true, false);
	resize(oDrag, oR, false, false, false, true);
	resize(oDrag, oB, false, false, true, false);
	
	oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
	oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
}
</script>
</head>
<body>
<div id="drag">
    <div class="title">
        <h2>这是一个可以拖动的窗口</h2>
        <div>
            <a class="min" href="javascript:;" title="最小化"></a>
            <a class="max" href="javascript:;" title="最大化"></a>
            <a class="revert" href="javascript:;" title="还原"></a>
            <a class="close" href="javascript:;" title="关闭"></a>
        </div>
    </div>
    <div class="resizeL"></div>
    <div class="resizeT"></div>
    <div class="resizeR"></div>
    <div class="resizeB"></div>
    <div class="resizeLT"></div>
    <div class="resizeTR"></div>
    <div class="resizeBR"></div>
    <div class="resizeLB"></div>
    <div class="content">
        ① 窗口可以拖动；<br />
        ② 窗口可以通过八个方向改变大小；<br />
        ③ 窗口可以最小化、最大化、还原、关闭；<br />
        ④ 限制窗口最小宽度/高度。
    </div>    
</div>
</body>
</html>
wx-18538561085
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个非常好用的前端框架，拖拽复制就能用
12-27
"一个非常好用的前端框架，拖拽复制就能用"，这显然指的是一个易用且功能丰富的前端框架，允许开发者通过简单的拖放操作和复制粘贴快速创建网页元素。 该框架可能包含了以下关键特性： 1. **组件化**：它可能拥有...
Qt无边框窗口体拖拽边框改变窗体大小终极方法(橡皮筋窗体)
02-05
在Qt编程中，有时我们需要创建一个无边框的窗口，以实现自定义的界面效果，例如，我们可能希望用户能够通过拖动窗口的任意位置来改变窗口大小，就像橡皮筋一样自由伸缩。这就是所谓的“橡皮筋窗体”或“无边框窗口体...
jquery 经典拖放效果 不看后悔啊
weixin_30405421的博客
03-12 82
本博客已搬家 地址：www.czhphp.com 所有更新都会在新博客进行 谢谢大家的支持！ 本博客已搬家 地址：www.czhphp.com 所有更新都会在新博客进行 谢谢大家的支持！ 引用至： http://www.cnblogs.com/hacker84/archive/2008/03/12/1101319.html 托拽购物车，很好很强大！ http://b...
html5 多点触控 缩放,jq 拖动+旋转+多点缩放
weixin_39774556的博客
06-19 332
Document*{margin: 0;padding: 0;box-sizing: border-box;}#box{width: 1280px;height: 720px;position: absolute;top: 50%;left: 50%;margin-top: -360px;margin-left: -640px;box-shadow: 0 0 10px rgba(0,0,0,.5)...
jQuery-拖动层(在可视区域范围内)
05-24 196
(function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 ...
web前端：div 弹出窗口实现——支持拖动、缩放、最大化
热门推荐
惜福的专栏
04-26 1万+
最近在项目中用到弹出窗口的功能，花了一些时间，就想做一个通用点的弹出窗口，这样大家就可以拿去直接用。如果正好你也需要做一个弹出框的功能，这个代码正适合你。 一、弹窗效果 这个弹出窗是结合了搜集的资料后做出来的，基本的需求都满足了，支持的功能有：自适应，拖动窗口位置，拉动右、下、右下可以实现缩放，可以最大化和还原。大致效果，如下图所示： 二、HTML 代码 &lt;!DOCT...
HTML 拖动实现对话框大小的变化
SAGGITARXM
09-23 879
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 1...
原生JS八个点控制DIV大小
11-11
原生JS八个点控制DIV大小，完美无错
云原生——从概念到实践RH.pdf
05-25
云原生——从概念到实践RH.pdf
云原生k8s部署前端项目Vue
09-22
云原生k8s部署前端项目Vue
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
拖拽+拖拽改变div大小
06-19
拖拽并同时拖拽改变div大小暂无兼容性问题
jQuery图片DIV指定范围内拖动加调整大小
06-01
实现在指定大小DIV内拖动图片，以及调整图片大小
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
10-22
主要介绍了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法,涉及jquery针对鼠标事件的响应及页面元素动态操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
可拖拽调整大小，嵌套组件vue-draggable-resizable
m0_56830409的博客
12-27 1124
vue可拖拽调整大小的组件，采用嵌套组件vue-draggable-resizable
(JS\VUE\REACT) div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度
最新发布
weixin_56383764的博客
01-12 1929
JS div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度。适用与原生JS、vue、react等多种形式
html边框拖拽,在边框上拖放时调整div的大小，而无需添加额外的标记
weixin_35975197的博客
06-21 595
我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。另外，我需要更改边框悬停时的光标。是否可以在不添加另一个div拖动的情况下执行此操作？这是标记：#right_panel {position: absolute;border-left: solid 3px #ccc;width: 100px;height: 100%;right: 0;background-color: #f0f0f0;...
html 拖拽 改变布局大小,兼容IE和Chrome的拖动改变布局宽度
weixin_42382703的博客
06-08 498
IE中通过setCapture监听鼠标按下和移动，Chrome浏览器中没有相应的方法，所以通过其它方式来实现。兼容IE和Chrome的拖动改变布局宽度var leftWidth;var widths=[140,0];var iw=1;var swidth;var sheight;function get(id) {return document.getElementById(id)}functio...
原生JS实现聊天窗口的输入框点击边框实现上下拖动改变输入框和聊天记录列表大小高度
06-17 1083
见图 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
云原生微服务Runtime详解——从新华三视角
"新华三云原生微服务Runtime.pdf" 这篇文档主要探讨了云原生环境下的微服务架构及其相关技术，特别是在2021年云原生大会中的讨论热点。微服务架构是一种将大型单体应用拆分为一组小型、独立的服务的方法，每个服务...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值