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

Question

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

我试图只调整一个 div 的西北 Angular 的大小，并将该逻辑放在 fiddle 中。逻辑对我来说似乎是正确的，但鼠标交互以一种奇怪的方式工作。

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

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