js 可拖動div 調整大小

 

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');