js拉动边框改变盒子大小

最新推荐文章于 2023-04-18 23:29:20 发布
最新推荐文章于 2023-04-18 23:29:20 发布
阅读量4.9k 收藏 11
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone10086/article/details/71374980
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                color: #000;
                text-decoration: none;
            }
            .drag{
                width: 300px;
                height: 300px;
                border: 1px solid #000;
                position: absolute;
                top: 100px;
                left: 100px;
                font-size: 14px;
                box-shadow: 2px 2px 5px gray;
            }
            .title{
                height: 35px;
                width: 100%;
                border-bottom: 1px solid #DDDDDD;
            }
            .min{
                width: 15px;
                height: 15px;
                font-size: 15px;
                position: absolute;
                top: 10px;
                right: 50px;
            }
            .max{
                width: 15px;
                height: 15px;
                font-size: 15px;
                position: absolute;
                top: 10px;
                right: 30px;
            }
            .revert{
                width: 15px;
                height: 15px;
                font-size: 15px;
                position: absolute;
                top: 10px;
                right: 30px;
                display: none;
            }
            .close{
                width: 15px;
                height: 15px;
                font-size: 15px;
                position: absolute;
                top: 10px;
                right: 10px;
            }

            .resizeB{
                width: 100%;
                height: 10px;
                position: absolute;
                bottom: 0;
                cursor: n-resize;

            }
            .resizeL{
                width: 10px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                cursor: w-resize;
            }
            .resizeT{
                width: 100%;
                height: 10px;
                position: absolute;
                top: 0;
                cursor: n-resize;
            }
            .resizeR{
                width: 10px;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                cursor: w-resize;
            }

            .resizeLT{
                width: 10px;
                height: 10px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                cursor: nw-resize;
            }
            .resizeLB{
                width: 10px;
                height: 10px;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 2;
                cursor: ne-resize;
            }
            .resizeRT{
                width: 10px;
                height: 10px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
                cursor: ne-resize;
            }
            .resizeRB{
                width: 10px;
                height: 10px;
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 2;
                cursor: nw-resize;
            }
            .content{
                margin: 10px;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="drag">
            <div class="title">
                <div class="tip">
                    <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="关闭">X</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="resizeRT"></div>
            <div class="resizeRB"></div>
            <div class="resizeLB"></div>
            <div class="content">拖动、最大化、最小化、关闭等效果</div> 
        </div>
    </body>
    <script type="text/javascript">
        var dragMinWidth=300;
        var dragMinHeight=300;
        var oDrag=document.querySelector('.drag');
        var oTitle=document.querySelector('.drag .title');
        var min=document.querySelector('.min');
        var max=document.querySelector('.max');
        var revert=document.querySelector('.revert');
        var close=document.querySelector('.close');
        var resizeL=document.querySelector('.resizeL');
        var resizeB=document.querySelector('.resizeB');
        var resizeR=document.querySelector('.resizeR');
        var resizeT=document.querySelector('.resizeT');
        var resizeLT=document.querySelector('.resizeLT');
        var resizeLB=document.querySelector('.resizeLB');
        var resizeRT=document.querySelector('.resizeRT');
        var resizeRB=document.querySelector('.resizeRB');



        //拖拉函数
        function drag(oDrag,handle){
            var disX=disY=0;
            handle=handle||oDrag;
            handle.style.cursor='move';

            handle.onmousedown=function(e){
                e=e||event;
                e.preventDefault();
                disX=e.clientX-oDrag.offsetLeft;
                disY=e.clientY-oDrag.offsetTop;
                document.onmousemove=function(e){
                    e=e||event;
                    var Left=e.clientX-disX;
                    var Top=e.clientY-disY;
                    var maxleft=document.documentElement.offsetWidth-oDrag.offsetWidth;
                    var maxtop=document.documentElement.clientHeight-oDrag.offsetHeight;
                    if (Left<0) {
                        Left=0;
                    }else if (Left>maxleft) {
                        Left=maxleft;
                    };
                    if (Top<0) {
                        Top=0;
                    }else if (Top>maxtop) {
                        Top=maxtop;
                    };
                    oDrag.style.left=Left+'px';
                    oDrag.style.top=Top+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };

            //最大化按钮
            max.onclick=function(){
                var maxwidth=document.documentElement.clientWidth-2;
                var maxheight=document.documentElement.clientHeight-2;
                oDrag.style.top=0;
                oDrag.style.left=0;
                oDrag.style.width=maxwidth+'px';
                oDrag.style.height=maxheight+'px';
                this.style.display='none';
                revert.style.display='block';
            };

            //还原按钮
            revert.onclick=function(){
                var width=300;
                var height=300;
                oDrag.style.top='100px';
                oDrag.style.left='100px';
                oDrag.style.width=width+'px';
                oDrag.style.height=height+'px';
                this.style.display='none';
                max.style.display='block';
            };

            //最小化按钮和关闭
            min.onclick=close.onclick=function(){
                oDrag.style.display='none';
            };
        };

        //改变大小函数
        function resize(oparent,handle,isleft,istop,lookx,looky){
            var disX=disY=0;
            handle=handle||oDrag;

            handle.onmousedown=function(e){
                e=e||event;
                e.preventDefault();
                disX=e.clientX-this.offsetLeft;
                disY=e.clientY-this.offsetTop;
                var iparenttop=oparent.offsetTop;
                var iparentleft=oparent.offsetLeft;
                var iparentwidth=oparent.offsetWidth;
                var iparentheight=oparent.offsetHeight;

                document.onmousemove=function(e){
                    e=e||event;
                    var iL=e.clientX-disX;
                    var iT=e.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;
                    if (isleft) {
                        oparent.style.left=iparentleft+iL+'px';
                    };
                    if (istop) {
                        oparent.style.top=iparenttop+iT+'px';
                    };
                    if (iw<dragMinWidth) {
                        iw=dragMinWidth
                    }else if (iw>maxw) {
                        iw=maxw;
                    };
                    if (lookx) {
                        oparent.style.width=iw+'px';
                    };
                    if (ih<dragMinHeight) {
                        ih=dragMinHeight;
                    }else if (ih>maxh) {
                        ih=maxh;
                    };
                    if (looky) {
                        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;
                };
            };
        };

        //调用
        (function(){
            drag(oDrag,oTitle);
            //四边变大
            resize(oDrag,resizeB,false,false,false,true);
            resize(oDrag,resizeR,false,false,true,false);
            resize(oDrag,resizeT,false,true,false,true);
            resize(oDrag,resizeL,true,false,true,false);

            //四角变大
            resize(oDrag,resizeRB,false,false,true,true);
            resize(oDrag,resizeRT,false,true,true,true);
            resize(oDrag,resizeLT,true,true,true,true);
            resize(oDrag,resizeLB,true,false,true,true);

        })();



    </script>
</html>

这里写图片描述

前端页面实现拖拽调整div盒子宽度
weixin_46028831的博客
04-11 3998
js实现拖拽调整div盒子宽度，拖拉修改宽度div 通过监听鼠标按下，移动，事件来计算 移动的宽度，动态给盒子设置宽度，即可实现拖拽调整div盒子的宽度 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
javascript拖拽时改变盒子的尺寸（宽高）
whqwyn的博客
10-13 2415
本博文纯属个人理解、可能与专业知识有出入！！！！！首先拖拽行为一共触发了三个事件：鼠标按下—onmousedown 鼠标移动—onmousemove 鼠标弹起—onmouseup二、事件发生—–>计算事件触发时各种数据的数值和变化获取对象var Box=document.getElementById('box');鼠标点下触发事件：Box.onmousedown=function(ev){}；立
可拖动div边框改变大小的方法
11-21
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
JavaScript的任意拖拽改变盒子的宽高<案例>
周秦卿的博客
10-17 3659
前言,虽然说出来确实丢人但我不得不说,这个案例困扰了我很久. 在自己细细的琢磨并且 弄懂后  记录下来.我认为是一种乐趣.    总体这个案例我们要实现的效果是,拖拽盒子的四周 任意改变盒子的宽高 与位置 在案例中我们需要用到 三个关于鼠标的事件.  1、onmousedown 鼠标按下后触发   2、  ommousemove 鼠标每移动一像素触发  3、 onmouseup 鼠标按下送开时触
js拖拽框，能修改大小，且能移动位置。
lilyssh的博客
03-10 1295
最近要做一个 拖拽框，能拖动框的大小，且能移动框的位置，幸得公司前端大神指教，告知去这个https://www.jq22.com/插件网站寻找，找到了想要的插件！就是这个https://www.jq22.com/jquery-info447，演示效果：https://www.jq22.com/yanshi447。 记录一下，以免忘掉。 ...
左右布局的两个盒子实现拖动改变宽度大小
最新发布
weixin_54754781的博客
04-18 659
鼠标左右拖动改变左右盒子大小功能。
鼠标拖动改变盒子的大小
weixin_45356397的博客
12-08 910
【代码】鼠标拖动改变盒子的大小。
JS写拖动事件以及拖拽改变大小
weixin_45050636的博客
05-23 421
注释可能不够详细，代码写的有点多，效果基本全部实现了。 记录定位值以及clientX,Y值和offsetX,Y值是关键 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
拖拽一侧可以改变盒子宽度或者高度，拿来即用。
qq_43586648的博客
08-12 1376
使用方法： 传入字段： type:非必须 类型 水平方向 level 垂直方向 vertical 默认 level fromName：必须，唯一的值，与项目其他地方使用的值保证不一样 miniMum:非必须：最小缩放宽度 直接贴代码： <!-- * @Author: lzy * @Date: 2020-07-14 18:36:53 * @FilePath: \lcfc_code\lcfc_code\src\components\moveWidth\lrMove.vue 左右拉动可以改变宽.
HTML中可拖动改变框架大小的页面范例
11-12
HTML中的可拖动改变框架大小的功能，是一种交互式的网页设计技术，主要依赖于JavaScript和HTML的结合使用。这种技术能够使用户通过鼠标拖动来调整网页元素的尺寸，提升用户体验，尤其是在多框架布局中，用户可以根据...
I_zoom.js拖动边框线改变大小.rar
03-09
I_zoom.js拖动边框线div改变大小.rar
JS实现盒子拖拽效果
10-15
主要为大家详细介绍了JS实现盒子拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
按边框可动态改变DIV大小
07-21
可改变大小div，按边框可动态改变DIV大小
BOM/DOM各种位置及大小
vistacyy的博客
04-26 431
1.clientHeightclientHeight 是内容可视区域的高度，不含border、scrollbar,包含padding.也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。2.offsetHeight返回元素实际大小，包含边框、内边距和滚动条。IE、Opera 认为 offsetHeight = clientHeight +
临摹中国慕课静态网页第二周周记（CSS3+JS）
weixin_53363646的博客
03-28 1451
临摹中国慕课静态网页第二周周记（CSS3+JS） 第二周 这周主要是对细节，轮播图，下拉菜单等地完善和JS的学习 学习内容 （1）CSS word-break 属性 属性规定自动换行的处理方法。 语法： word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 （2）伪元素 之前都没有系统的把伪元素学习一遍，因为最多用
js改变盒子大小(上下左右)分析
weixin_30344131的博客
03-16 2095
js改变盒子大小 知识点 三个mouse事件：mousedown mousemove mouseup css的定位和cursor 思路 先解决单边问题识别范围,得到所选区域 event. 根据距离,判断方向根据方向进行样式的增加减少,注意top和left的变化当然还要增加最小的限制 注意 识别改变的四个位置 得到它们的范围 判断改变范围的大小 注意改变top和left的边的时候...
JS 实现 ResizeBar，可拖动改变上下两个区域大小
IT博客技术分享
10-27 1190
先上效果图：
用户拉伸（用户拉伸盒子变宽）（基于原本可拖拽的盒子）
可乐加冰的博客
06-17 246
用户拉伸（用户拉伸盒子变宽） 只拉伸右边，左侧不动（就是盒子拉伸时top,left不动） 基于前两篇，就直接粘贴全部代码 css html没有做改变，可以自己写，也可以去前面看 var box = document.querySelector(".box"); var a = document.querySelector("#a"); // 盒子宽高 var boxHeight = box.offsetHeight, boxWidth = box.offsetWidth; // 鼠标在盒子上移动时 a
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
IT技术分享社区
05-06 5028
前言今天来给大家盘点三个JavaScript案例，分别是实现限时秒杀、定时跳转、改变盒子大小案例，一起来看看吧！一、实现限时秒杀案例1.在淘宝网中，商家为了促销经常搞一些活动，例如限时秒杀...
Vue实现div拖动与改变大小详解
在Vue.js中实现一个div元素既能拖动位置又能调整大小的功能，涉及到的主要技术包括JavaScript的鼠标事件处理和CSS定位。以下是对这一实现原理的详细解释： 1. 盒子拖动 - 鼠标事件：首先，我们需要监听三个鼠标...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值