Jquery UI - Resizable:alsoResize 不准确？答案

【问题标题】：Jquery UI - Resizable: alsoResize not accurate?Jquery UI - Resizable:alsoResize 不准确？
【发布时间】：2011-09-30 15:54:36
【问题描述】：

好的，我没有使用“alsoResize”，但我已经测试过了，它的行为是一样的。

当您调整主元素的大小时，底部元素“marquee”的黑色边框通常会与顶部元素的白色虚线边框不一致。

$(".layer").resizable({
    //alsoResize: '.marquee',
    resize: function(event, ui) {
        $('.marquee').css({
            width : ui.size.width + "px",
            height : ui.size.height + "px",
            left : ui.position.left + "px",
            top : ui.position.top + "px",
        });
    },
    handles: 'all',
    aspectRatio: true,
});

http://jsfiddle.net/digitaloutback/uGr3w/3/

在本地demo上使用firebug，在他们出线的阶段，你可以看到内联元素的left、top和width、height的样式都不一样。

我想知道是否可以将位置和大小统计数据发送到函数，从而为这两个元素输出精确的测量值？有更简单的选择吗？谢谢

更新：

我有一个干净的解决方法。它将可调整大小的计算尺寸传递给一个函数，该函数也将顶层设置为这些尺寸。

我确信有更有效的方法可以做到这一点，请随时提供优化版本..

http://jsfiddle.net/digitaloutback/VDfpY/5/

【问题讨论】：

标签： javascript jquery css jquery-ui resizable

【解决方案1】：

ui 参数向 resize 事件报告的大小和位置与实际大小和位置似乎存在差异。这可能是由于在构建 ui 参数和触发事件之间存在延迟。

我使用事件运行时报告的实际位置和大小进行了实验：

        $('.marquee').css({
            'left' : $(this).position().left,
            'top' : $(this).position().top,
            'width' : $(this).width(),
            'height' : $(this).height()
        });

这似乎更精确地匹配实际尺寸。 http://jsfiddle.net/VDfpY/1/

【讨论】：

感谢您对更直接的方法的提醒 - 我已经回复了一个效果很好的解决方案，虽然可能不是最有效的..
这让我发疯了； ui 对象一直给我错误的尺寸宽度/高度值，总是 1px 太高或太低！您的解决方案似乎每次都能准确地工作（尽管出于某种原因，我只需要使用宽度/高度，而不是位置）。非常感谢，+1。

【解决方案2】：

这个怎么样？让 CSS 处理尺寸而不是 JS http://jsfiddle.net/HerrSerker/uGr3w/5/

--编辑添加的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".layer").resizable({
        handles: 'all',
        aspectRatio: true,
    });

});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
    background: #999}

.marquee {
    border: 1px dashed #fff;
    position: absolute;
    left: -1px; top: -1px;
    width: 100%; height: 100%;
    display: block;
    z-index: 2500;    
}

.layer {
    border: 1px solid black;
    position: absolute;
    left: 150px; top: 150px;
    width: 250px; height: 226px;
    display: block;
    z-index: 2501;
}

</link>
<body>
<div id="canvas">
    <a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

【讨论】：

-1 在答案中也发布您的解决方案！如果 jsfiddle 宕机将无法显示你的正确答案！