jQuery UI Resizable 永远不会达到设置宽高比的全宽

Posted 2023-05-08

【中文标题】jQuery UI Resizable 永远不会达到设置宽高比的全宽

【英文标题】：jQuery UI Resizable never reaches the full width with aspect set

【发布时间】：2021-09-10 20:44:23

【问题描述】：

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

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

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

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

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

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

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

【参考方案1】：

您遇到的情况似乎是由 jQuery UI Resizable 插件中的错误计算组合造成的。很难将这些标记为“错误”：编写时，代码运行良好。

其中一些问题已在 9 (!) 年前创建的 the ticket 中进行了介绍。那里的最后一条消息是 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 可以稍微缓解这里的第一个问题，但修复第二部分的唯一方法是修复插件的代码。