jQuery UI可调整大小永远不会达到宽高比设置的全宽

Question

我使用的是宽高比设置为16/9的jQuery ui可调整大小。

$(".select").resizable({
                containment: "#container",
                aspectRatio: 16 / 9,
                grid: 1,
                stop: function (e, ui) {},
            });

我希望能够拖动可调整大小的元素的全宽度来匹配容器，但如果永远不能完全到达它，请参见此图像。

​

​

你应该注意到最右边的差距。

这是一个我正在测试的工作演示。

https://output.jsbin.com/cimorikefu/2/

我想能够拖拽全宽的元素有什么建议吗？

Answer 1

您遇到的问题似乎是由jQuery UI可调整大小插件中的计算错误组合造成的。很难给这些代码贴上“bug”的标签:当它被写出来的时候，代码工作得很好。

其中一些问题在the ticket created 9 (!)中有所介绍。几年前。最后一条信息是5年前写的，所以修复它的可能性很小；世界已经在向前发展了。

下面是代码的可疑部分(1.12 source is analyzed)：

// in _mouseStart()
this.sizeDiff = {
   width: el.outerWidth() - el.width(),
   height: el.outerHeight() - el.height()
};

// ... in resize()
woset = Math.abs( that.sizeDiff.width + // ... )

这部分似乎忽略了一个事实，即元素可能具有不同的box-sizing models，总是尝试处理基于content-box的元素-并将边框宽度考虑在内。

虽然outerWidth()和width()的行为在jQuery 1.8中得到了纠正，但相应的调整并没有及时到达可调整大小的源代码。现在，链接工单中准备并列出的请购单不再适用(代码在~1.10中重构后)。

尽管如此，还有更多：

if ( woset + that.size.width >= that.parentData.width ) {
  that.size.width = that.parentData.width - woset;
  if ( pRatio ) {
    that.size.height = that.size.width / that.aspectRatio;
    continueResize = false;
  }
}

// ...

if ( !continueResize ) {
  that.position.left = that.prevPosition.left;
  that.position.top = that.prevPosition.top;
  that.size.width = that.prevSize.width;
  that.size.height = that.prevSize.height;
}

在本例中设置了pRatio，这意味着只要您的调整大小操作要使可调整大小的对象与容器的大小相同，其宽度就会重置为以前的大小。因此，如果您移动鼠标足够快，可调整大小的元素在击中容器的边界之前就会卡住。

虽然这里的第一个问题可能会通过在设计.ui-widget-content样式时用outline替换border来缓解，但修复第二部分的唯一方法是修复插件的代码。