Javascripte——实现拖拽

慢慢学编程

于 2020-02-01 15:07:28 发布

阅读量172

点赞数

分类专栏：慢慢找工作文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_40492102/article/details/104134020

版权

慢慢找工作专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一种使用CSS实现的页面布局方法，并通过JavaScript实现了鼠标拖动元素改变其父元素大小的功能。通过设置绝对定位和相对定位，使得子元素能够在页面右下角固定显示。同时，利用onmousedown和onmousemove事件，实现用户通过鼠标拖动子元素来动态调整父元素的宽高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body {
        background: yellowgreen;
    }
    
    * {
        margin: 0;
        padding: 0;
    }
    
    #box1 {
        position: relative;
        width: 200px;
        height: 200px;
        background: #000;
    }
    
    #box2 {
        position: absolute;
        width: 50px;
        height: 50px;
        background: yellow;
        right: 0;
        bottom: 0;
    }

   <div id="box1">
        <div id="box2"></div>
    </div>

 var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    box2.onmousedown = function(e) {
        var e = e || window.event;
        var x = e.clientX;
        var y = e.clientY;
        var width = box1.offsetWidth;
        var height = box1.offsetHeight;
        document.onmousemove = function(e) {
            var e = e || window.event;
            box1.style.width = width + e.clientX - x + "px";
            box1.style.height = height + e.clientY - y + "px";
        }
    }

    box2.onmouseup = function() {
        document.onmousemove = null;
    }