内容实现拖拽放大缩小

最新推荐文章于 2023-07-14 14:07:59 发布

sjy7329

最新推荐文章于 2023-07-14 14:07:59 发布

阅读量636

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sunjynyue/article/details/84881148

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽放大缩小事件委托</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:300px;
            height:200px;
            border:1px #ccc solid;
            position:absolute;
            left:calc(50% - 150px);
            top:calc(50% - 50px);
            border-radius:3px;
            overflow: hidden;

        }
        .boxTitle{
            height:30px;
            line-height:30px;
            border-bottom: 1px #ccc solid;
            font-size:16px;
            color:#333;
            padding:0 15px;
            cursor: pointer;

        }
        .boxCont{
            padding:15px;
            font-size:14px;
            color:#666;

        }

        .drag{
            position:absolute;
            bottom:0;
            right:0;
            width:30px;
            height:30px;
            background:#333;
            font-size:12px;
            color:#fff;
            line-height:30px;
            text-align:center;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="boxTitle">拖拽标题</div>
    <div class="boxCont">
        你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分
        你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分你好,我是文字部分
    </div>
    <div class="drag">缩放</div>
</div>
<script>
    box.οnmοusedοwn=function(e){
        var ev=e||event;
        var iTarget=ev.srcElement||ev.target;

        if(iTarget.className=='boxTitle'){
            var l=ev.clientX-iTarget.parentNode.offsetLeft;
            var t=ev.clientY-iTarget.parentNode.offsetTop;

            document.οnmοusemοve=function(e){
                var ev =e ||event;

                var needLeft=ev.clientX-l;
                var needTop=ev.clientY-t;
                var maxL=innerWidth-box.offsetWidth;
                var maxT=innerHeight-box.offsetHeight;

                needTop<0?needTop=0:needTop;
                needLeft<0?needLeft=0:needLeft;
                needLeft>maxL?needLeft=maxL:needLeft;
                needTop>maxT?needTop=maxT:needTop;

                iTarget.parentNode.style.left=needLeft +'px';
                iTarget.parentNode.style.top=needTop +'px'
            };

            document.οnmοuseup=function(){
              document.οnmοusemοve=document.οnmοuseup=null;
            };

            return false;
        }

        if(iTarget.className=='drag'){
            var l=ev.clientX-iTarget.offsetLeft;
            var t=ev.clientY-iTarget.offsetTop;

            document.οnmοusemοve=function(e){
                var ev=e||event;

                var needL=ev.clientX-l;
                var needT=ev.clientY-t;
                needL<80?needL=80:needL;
                needT<80?needT=80:needT;


                iTarget.style.left=needL+'px';
                iTarget.style.top=needT+'px';

                box.style.width=iTarget.offsetLeft+iTarget.offsetWidth+'px';
                box.style.height=iTarget.offsetTop+iTarget.offsetHeight+'px';
            };

            document.οnmοuseup=function(){
                document.οnmοusemοve=document.οnmοuseup=null;
            };
            return false;
        }
    }
</script>
</body>
</html>

sjy7329

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容实现拖拽放大缩小

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拖拽放大缩小事件委托&lt;/title&gt; &lt;style&gt; *{ margi
复制链接

扫一扫