jQuery可调整大小的居中div与网格产生意想不到的结果

时间:2013-12-11 12:44:55

标签: javascript jquery css jquery-ui jquery-resizable

我有一个以页面为中心的div使用css - margin:0 auto;这是必不可少的

jQuery resizeable连接到div,以便可以水平调整大小。

还可以添加resizeable的'grid'选项,因为在调整大小期间会触发其他函数,并且这些函数被调用太多次而没有激活网格选项。

我还在可调整大小的div中添加了一个jquery位置,以便在调整大小时保持居中,否则当你拖动左边缘时它会失去它的中心位置。

问题是鼠标向左或向右移动越远,向左或向右拖动div越宽。 div的左/右边缘应始终捕捉到鼠标位置。

此外,ui.size.width报告的值远远高于div的实际宽度。

我尝试了很多修复,但似乎没有任何效果。

这是下面带有jsfiddle链接的代码:

HTML:

<div id="container">
    <div class="resize">
        Lorem
        <br/>ipsum
        <br/>dolor
        <br/>sit
        <br/>amet
        <br/>Consectetuer
        <br/>Lorem
        <br/>magna
        <br/>mi
        <br/>wisi
     </div>
</div>

<div id="width-output"></div>
<div id="ui-width-output"></div>

CSS:

#container {
    width:100%;
    background-color:#999999;
}
.resize {
    width:240px;
    margin:0 auto;
    background-color:#ccc;
    text-align:center;
}

#ui-width-output, #width-output  {
    text-align:center;
}

jQuery:

$(document).ready(function () {
    $(".resize").resizable({
        grid: [80, 80],

        handles: 'e, w',
        resize: function (event, ui) {

            ui.size.width += ui.size.width - ui.originalSize.width;

            var container =  $('#container');

            var position = $(this).position();
            var container_position = container.position();
            var top_position = position.top - container_position.top;

            var offset = 'center top+' + top_position;
            $(this).position({
                of: $(container),
                my: offset,
                at: "center top",
                collision: "fit none"
            });

            $('#width-output').html('actual width: ' +  $(this).width() );            
            $('#ui-width-output').html('ui.size.width: ' +  ui.size.width);

        }

    });
});

我创建了一个测试用例,以便所有这些更有意义!

http://jsfiddle.net/bennyticklez/S5tN8/51/

提前致谢。

2 个答案:

答案 0 :(得分:3)

ui.size.width += ui.size.width - ui.originalSize.width;给你一半你需要的东西。如果您将更改加倍以适应每一方可能会有所帮助,更像是:

$(".resize").resizable({
    grid: [80, 80],
    handles: 'e, w',
    resize: function(event, ui) {
        var newWidth = ui.originalSize.width+((ui.size.width - ui.originalSize.width)*2);
        $(this).width(newWidth).position({
            of: $("#container"),
            my: "center center",
            at: "center center"
        });
    }
});

我做了一个小提琴:http://jsfiddle.net/filever10/fYQ58/

虽然我也找到了这个,所以你曾经用它做你想做的事情:http://jsfiddle.net/xhAU4/2/

答案 1 :(得分:0)

有点破解,但写了一个小函数来做一个非常简单的计算来保持位置居中。 为简单起见,可旋转元件位于父元件中。

HTML:

<div id="container">
    <div id="resize-me"></div>
</div>

JS:

$( '#resize-me' ).resizable 
    (   {
            handles:        {   'se': '#resize-handle'  },
            aspectRatio:    true,
            resize:         function(){ positionObject( $( this ) );    }
    }   );

function    positionObject( resizeElement )
{
    resizeElement.css( 'left', ( resizeElement.css( 'width' ).replace( 'px', '' ) / -2 ) );
    resizeElement.css( 'top', ( resizeElement.css( 'height' ).replace( 'px', '' ) / -2 ) );

    // console.log(resizeElement.css( 'left' ) );
    // console.log(resizeElement.css( 'top' ) );
}