js 可拖动div 调整大小

最新推荐文章于 2025-07-04 13:20:04 发布

转载最新推荐文章于 2025-07-04 13:20:04 发布 · 920 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hfultrastrong/p/10608758.html

文章标签：

#前端 #ViewUI

本文介绍了一种使用JavaScript实现的拖动边框效果，通过鼠标操作可以调整元素的宽度和高度。具体实现了右边界、底边界及右下角的拖动调整功能。

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

dragBorder: function (parent, right, bottom, bottomRight) {
    var isDownRight = false;
    var isDownBottom = false;

    var doc = $(document);
    var p = $('#' + parent);
    var r = $('#' + right);
    var b = $('#' + bottom);
    var br = $('#' + bottomRight);

    var mouseStartPos = {};

    r.mousedown(function (e) {
        isDownRight = true;
        mouseStartPos.x = e.clientX;
        mouseStartPos.y = e.clientY;
    });
    b.mousedown(function (e) {
        isDownBottom = true;
        mouseStartPos.x = e.clientX;
        mouseStartPos.y = e.clientY;
    });
    br.mousedown(function (e) {
        isDownBottom = true;
        isDownRight = true;
        mouseStartPos.x = e.clientX;
        mouseStartPos.y = e.clientY;
    });

    var opw = p.width();
    doc.mousemove(function (e) {
        // right
        if (isDownRight) {
            var l = e.clientX - mouseStartPos.x;
            var w = parseInt(l) + parseInt(opw);
            p.width(w);
        }
    });
    var oph = p.height();
    doc.mousemove(function (e) {
        // bottom
        if (isDownBottom) {
            var t = e.clientY - mouseStartPos.y;
            var h = parseInt(t) + parseInt(oph);
            p.height(h);
        }
    });
    doc.mousemove(function (e) {
        // bottomRight
        if (isDownBottom) {
            var l = e.clientX - mouseStartPos.x;
            var w = parseInt(l) + parseInt(opw);
            p.weight(w);
            var t = e.clientY - mouseStartPos.y;
            var h = parseInt(t) + parseInt(oph);
            p.height(h);
        }
    });

    r.mouseup(function () {
        isDownRight = false;
        opw = p.width();
    });
    b.mouseup(function () {
        isDownBottom = false;
        oph = p.height();
    });
    br.mouseup(function () {
        isDownBottom = false;
        isDownRight = false;
        opw = p.width();
        oph = p.height();
    });
}

this.dragBorder('chatWindow', 'chatRightGragClass', 'chatBottomGragClass', 'chatblockGragClass');

转载于:https://www.cnblogs.com/hfultrastrong/p/10608758.html