美文网首页
拖拽控制元素宽高

拖拽控制元素宽高

作者: web_afei | 来源:发表于2021-06-09 17:18 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.test {
position: relative;
}

.line {
    position: absolute;
    width: 5px;
    top: 0;
    bottom: 0;
    right: 0;
    background: #ccc;
    cursor: col-resize;
}

</style>

<body>
<div class="test" style="width: 100px;height: 100px; border:1px solid red">
<div class="line"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
(function () { //绑定需要拖拽改变大小的元素对象 bindResize(('.test')[0],$('.line')[0]);
});

    function bindResize(el,line) {
        //初始化参数   
        var els = el.style,
            //鼠标的 X 和 Y 轴坐标   
            x = y = 0;
        //邪恶的食指   
        $(line).mousedown(function (e) {
            console.log(1);
            //按下元素后,计算当前鼠标与对象计算后的坐标  
            x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight;
            //在支持 setCapture 做些东东  
            el.setCapture ? (
                //捕捉焦点   
                el.setCapture(),
                //设置事件   
                line.onmousemove = function (ev) {
                    mouseMove(ev || event)
                },
                line.onmouseup = mouseUp
            ) : (
                //绑定事件   
                $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
            )
            //防止默认事件发生   
            e.preventDefault()
        });
        //移动事件   
        function mouseMove(e) {
            //宇宙超级无敌运算中... 
            els.width = e.clientX - x + 'px' //改变宽度
            // els.height = e.clientY - y + 'px' //改变高度 
        }
        //停止事件   
        function mouseUp() {
            //在支持 releaseCapture 做些东东   
            el.releaseCapture ? (
                //释放焦点   
                el.releaseCapture(),
                //移除事件   
                el.onmousemove = el.onmouseup = null
            ) : (
                //卸载事件   
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
            )
        }
    }
</script>

</body>

</html>

相关文章

  • 拖拽控制元素宽高

    Document .test {position: relative;} ('...

  • jQuery中的动画,事件触发及事件委托

    让元素隐藏出现通过控制元素的宽高,来实现 让元素淡入淡出通过控制元素的透明度来实现,出现隐藏 卷帘式通过控制元素的...

  • JQuery动画,事件

    让元素隐藏出现通过控制元素的宽高,来实现 hide(slow|normal|fast|num) //元素隐藏sho...

  • JQuery动画。事件

    让元素隐藏出现通过控制元素的宽高,来实现 hide(slow|normal|fast|num) //元素隐藏sh...

  • CSS之元素排布规则(标准流,浮动流,定位流)

    概念区分 元素展示 展示控制属性 display 块级元素 block :独占一行,可设置宽高 行内元素 inli...

  • 未知宽高元素居中篇

    一、父元素宽高未知、子元素宽高已知 父元素{ position: relative;}子元素{ position...

  • 清除浮动

    给父元素设置宽高: 由于浮动后的元素脱离文档流,无法撑起父元素的宽高,可以设置父元素的宽高。 CSS的clear属...

  • 自己遗漏的知识点

    行内元素、块元素、行内块元素 行内元素不可设置宽高块元素可设置宽高并且独占一行行内块元素可设置宽高 锚点 清除浮动...

  • 内联元素与块级元素的区别

    内联元素不会独占一行,块级元素会独占一行 内联元素设置宽高无效,宽高随内容的大小而决定 块级元素可以设置宽高,其宽...

  • flex-basis、flex-grow、flex-shrink

    flex-basis 用来给项目设置初始 宽/高 flex-grow 在父元素 宽/高 大于子元素 宽/高 之和时...

网友评论

      本文标题:拖拽控制元素宽高

      本文链接:https://www.haomeiwen.com/subject/voylsltx.html