有个容器，右下角有个框，移入点击后移动可以改变容器的大小怎么实现？

张怼怼

39415110187

发布于
2018-12-05

如图，我有个容器，右下角有个pink区域，请问怎么样让鼠标移入按住左键的情况下拖动可以改变容器的大小？谢谢
图片描述

javascript vue.js

阅读 1.9k

4 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2018-12-05

✓ 已被采纳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width:200px;
                height:200px;
                background-color: red;
                position:relative;
                top:50%;
                left:50%;
            }
            #div2{
                width:10px;
                height:10px;
                background-color: black;
                position:absolute;
                right:0;
                bottom:0;
            }
        </style>
    <head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <script>
            var oDiv=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            oDiv2.onmousedown=function (ev){
                ev=ev||event;
                var disX=ev.clientX-oDiv2.offsetLeft;
                var disY=ev.clientY-oDiv2.offsetTop;
                document.onmousemove=function (ev){
                    ev=ev||event;
                    oDiv.style.width=ev.clientX-disX+oDiv2.offsetWidth+'px';
                    oDiv.style.height=ev.clientY-disY+oDiv2.offsetHeight+'px';
                }
                document.onmouseup=function (){
                    document.onmousemove = document.onmouseup = null;
                }
            }
        </script>
    </body>
</html>

复制代码直接运行

伍陆柒

1.2k1313

发布于
2018-12-05

按住获取坐标, 然后让target目标区域的宽高变化不就行了, 就是宽高稍微不好算一点.

给你个例子:

拖拽宽高,改变位置

Villee_

1.3k1315

发布于
2018-12-05

右下角元素上增加 mousedown 监听并记住按住的 x，y 位置，在 mousedown 事件中给 window.document 增加 mousemove 和 mouseup 监听，在 mousemove 时计算鼠标移动的位置，计算和x, y的偏移并及时调整 pink 大小，在 mouseup 监听中去除 mousemove 监听。