使用jquery调整div左上角的大小

Question

我有一个 div，我想从各个方面调整大小，即 nw、n、ne、e、w、sw、s、se。我已经尝试过 jquery ui 的可调整大小的插件，但在我的代码中不起作用。我已经从我的代码中删除了复杂性，并将其放在一个非常基本的小提琴中。

我试图仅调整 div 的西北角的大小并将该逻辑置于小提琴中。逻辑对我来说似乎是正确的，但鼠标交互的工作方式很奇怪。

你们能告诉我我在这里做错了什么吗？如果我得到正确的左上角，我可以管理其余的。谢谢。

HTML：

<div id="box">
    <div id="nw"></div>
    <div id="n"></div>
    <div id="ne"></div>
    <div id="w"></div>
    <div id="e"></div>
    <div id="sw"></div>
    <div id="s"></div>
    <div id="se"></div>
</div>
<p class="one"></p>
<p class="two"></p>

CSS：

#box{border:1px solid #000;width:100px;height:100px;background-color:red;position:absolute;top:100px;left:100px}
#box > div{height:10px;width:10px;background-color:#000;position:absolute}
#nw{top:-5px;left:-5px;cursor:nw-resize}
#n{top:-5px;left:45px;cursor:n-resize}
#ne{top:-5px;right:-5px;cursor:ne-resize}
#w{top:45px;left:-5px;cursor:w-resize}
#e{top:45px;right:-5px;cursor:e-resize}
#sw{bottom:-5px;left:-5px;cursor:sw-resize}
#s{bottom:-5px;left:45px;cursor:s-resize}
#se{bottom:-5px;right:-5px;cursor:se-resize}
p{margin-top:250px;font-size:8px}

JS：

$(function(){
    var mousepress = false;
    $("#box > div").mousedown(function(e){
        mousepress = true;
    });

    $("#box > div").mousemove(function(e){
        if(mousepress) {
            var boxX = $("#box").position().left;
            var boxY = $("#box").position().top;
            var boxW = $("#box").width();
            var boxH = $("#box").height();

            var x = boxX - e.pageX;//$(this).position().left;
            var y = boxY - e.pageY;//$(this).position().top;
            $("p.two").append("x: "+x+"<br />");
            $(this).css({
                "top":y+"px",
                "left":x+"px"
            });
            $("#box").css({
                "top":(boxY+y-5)+"px",
                "left":(boxX+x-5)+"px",
                "width":(boxW+x)+"px",
                "height":(boxH+y)+"px",
            });

        }
    });

    $("#box > div").mouseup(function(){
        mousepress = false;
    });
});

**JSFIDDLE：**http://jsfiddle.net/ashwyn/v8qoLj76/2/

Answer 1

我不太明白你是如何计算盒子的大小和位置的，不知道用户按下了哪个内部 div。

我已将其更改为使用鼠标事件位置。

我也将mousemove 和mouseup 事件移到了文档中，因为当使用鼠标拖动时，它可能会比DOM 移动得更快，并且开箱即用。

我还将内部 div 的位置更改为使用 50%，因此它始终位于中间。您可能需要添加一些边距以使其更好地居中。 （见北与南 - 我在其中一个上添加了margin-left）

这对我来说很好。

http://jsfiddle.net/v8qoLj76/4/

var prev_x = -1;
var prev_y = -1;
var dir = null;
$("#box > div").mousedown(function(e){
    prev_x = e.clientX;
    prev_y = e.clientY;
    dir = $(this).attr('id');
});

$(document).mousemove(function(e){
    if (prev_x == -1)
        return;

    var boxX = $("#box").position().left;
    var boxY = $("#box").position().top;
    var boxW = $("#box").width();
    var boxH = $("#box").height();
    var dx = e.clientX - prev_x;
    var dy = e.clientY - prev_y;

    //Check directions
    if (dir.indexOf('n') > -1) //north
    {
        boxY += dy;
        boxH -= dy;
    }
    if (dir.indexOf('s') > -1) //south
    {
        boxH += dy;
    }
    if (dir.indexOf('w') > -1) //west
    {
        boxX += dx;
        boxW -= dx;
    }
    if (dir.indexOf('e') > -1) //east
    {
        boxW += dx;
    }

    $("#box").css({
        "top":(boxY)+"px",
        "left":(boxX)+"px",
        "width":(boxW)+"px",
        "height":(boxH)+"px",
    });

    prev_x = e.clientX;
    prev_y = e.clientY;
});

$(document).mouseup(function(){
    prev_x = -1;
    prev_y = -1;
});

Answer 2

这是你需要的东西吗（见下面的 sn-p）？

$(function() {
    var ORIGINAL_TOP = 100, ORIGINAL_LEFT = 100, ORIGINAL_WIDTH = 100, ORIGINAL_HEIGHT = 100, OFFSET = 5;

    $('.top').css({top: (ORIGINAL_TOP - OFFSET) + 'px'});
    $('.left').css({left: (ORIGINAL_LEFT - OFFSET) + 'px'});
    $('.bottom').css({top: (ORIGINAL_TOP + ORIGINAL_HEIGHT - OFFSET) + 'px'});
    $('.right').css({left: (ORIGINAL_LEFT + ORIGINAL_WIDTH - OFFSET) + 'px'});

    $('.control-element').css({height: (2 * OFFSET) + 'px', width: (2 * OFFSET) + 'px'});

    var moveMiddleControls = function(top, left, width, height) {
        ['top', 'bottom'].forEach(function(coordinate) {
            $('#' + coordinate).css({left: (left + width / 2 - OFFSET) + 'px'});
        });

        ['left', 'right'].forEach(function(coordinate) {
            $('#' + coordinate).css({top: (top + height / 2 - OFFSET) + 'px'});
        });
    };

    var resizeBox = function(top, left, width, height) {
        $('#box').css({
            top: top + 'px',
            left: left + 'px',
            width: width + 'px',
            height: height + 'px'
        });
    };

    var updateStatus = function(top, left, width, height) {
        $('#status-top').html(Math.round(top));
        $('#status-left').html(Math.round(left));
        $('#status-width').html(Math.round(width));
        $('#status-height').html(Math.round(height));
    };

    var updatePosition = function(top, left, width, height) {
        resizeBox(top, left, width, height);
        moveMiddleControls(top, left, width, height);
        updateStatus(top, left, width, height);
    };

    var update = function() {
        updatePosition(
            $('#top').position().top + OFFSET,
            $('#left').position().left + OFFSET,
            $('#right').position().left - $('#left').position().left,
            $('#bottom').position().top - $('#top').position().top
        );
    };

    update();

    var activeElement;

    $('.control-element').mousedown(function(e) {
        activeElement = this;
        e.preventDefault();
        return false;
    });

    $(document).mousemove(function(e) {
        if(activeElement !== undefined) {
            ['top', 'bottom'].forEach(function(className) {
                if($(activeElement).hasClass(className)) {
                    $('.' + className).css({top: e.pageY + 'px'});
                }
            });

            ['left', 'right'].forEach(function(className) {
                if($(activeElement).hasClass(className)) {
                    $('.' + className).css({left: e.pageX + 'px'});
                }
            });

            update();
        }
    });

    $(document).mouseup(function() {
        activeElement = undefined;
    });
});

#box {
    border:1px solid #000;
    background-color:red;
    position: fixed;
}

.control-element {
    background-color: #000;
    position: fixed;
}

#top-left {
    cursor: nw-resize;
}

#top {
    cursor:n-resize;
}

#top-right {
    cursor:ne-resize;
}

#left {
    cursor:w-resize;
}

#right {
    cursor:e-resize;
}

#bottom-left {
    cursor:sw-resize;
}

#bottom {
    cursor:s-resize;
}

#bottom-right {
    cursor: se-resize;
}

.status {
    position:fixed;
    right: 5px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    z-index: 999;
    font-size:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <div id="box"></div>

        <div id="top-left" class="control-element top left"></div>
        <div id="top" class="control-element top"></div>
        <div id="top-right" class="control-element top right"></div>
        <div id="right" class="control-element right"></div>
        <div id="bottom-right" class="control-element bottom right"></div>
        <div id="bottom" class="control-element bottom"></div>
        <div id="bottom-left" class="control-element bottom left"></div>
        <div id="left" class="control-element left"></div>

        <div class="status">
            <div>top: <span id="status-top"></span>px</div>
            <div>left: <span id="status-left"></span>px</div>
            <div>width: <span id="status-width"></span>px</div>
            <div>height: <span id="status-height"></span>px</div>
        </div>