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

Question

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

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

我希望能够拖动可调整大小的元素全宽以匹配容器，但如果 quite 永远无法到达它，请查看此图像。

你应该注意到最右边的空隙。

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

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

我希望能够拖动元素全宽有什么建议吗？

Answer 1

您遇到的情况似乎是由jQuery UI Resizable 插件中的错误计算组合引起的。很难将它们标记为 'bugs'：编写代码时，代码运行良好。

the ticket 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 中得到纠正，但相应的调整没有及时到达 Resizable 源。现在链接票证中准备和列出的 PR 不再适用（在 ~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 时将 border 替换为 outline 可能会稍微缓解这里的第一个问题，但修复第二部分的唯一方法是修复插件的代码.

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

jQuery UI Resizable never reaches the full width with aspect set

javascript

jquery

jquery-ui