使用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

是否需要（請參見下面的代碼段）？

 $(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>