Jquery UI - 可调整大小:alsoResize不准确？

Question

好吧我没有使用'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/

在本地演示中使用firebug,在它们出错的阶段,您可以看到左侧,顶部和宽度,高度的内联元素样式是不同的.

我想知道一个解决方法是将位置和大小统计数据发送到哪个函数,它会对两个元素输出精确的测量结果？任何更简单的选择？谢谢

更新:

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

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

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

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