javascript - Jquery UI - 可调整大小 : alsoResize not accurate?

Question

好吧，我没有使用“alsoResize”，但我已经测试过，它的行为是相同的。

当您调整主元素的大小时，底部元素“选取框”的黑色边框通常会与顶部元素的白色虚线边框偏离。

$(".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/

Answer 1

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

我尝试使用事件运行时报告的实际位置和大小:

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

这似乎更符合实际尺寸。 http://jsfiddle.net/VDfpY/1/