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

是否需要（请参阅下面的代码段）？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用jquery

2 个答案: