时间戳

首页 > 解决方案 > jQuery UI Resizable 永远不会达到设置宽高比的全宽

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

问题描述

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

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

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

在此处输入图像描述

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

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

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

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

标签： javascriptjqueryjquery-ui

解决方案

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

其中一些问题已包含在9 (!) 年前创建的票证中。那里的最后一条消息是 5 年前写的，因此修复的机会很小；世界已经向前发展。

下面是代码的可疑部分（1.12源码分析）：

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

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

这部分似乎忽略了元素可能有不同的 box-sizing 模型这一事实，总是试图处理那些基于content-box- 并考虑边框宽度的元素。

虽然jQuery 1.8 中已经纠正了outerWidth()and的行为，但相应的调整并没有及时到达 Resizable 源。width()现在链接的工单中准备和列出的 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已设置，这意味着每当您的调整大小操作即将使可调整大小的对象与容器大小相同时，其宽度将重置为之前的大小。因此，如果您移动鼠标的速度足够快，可调整大小的元素会在碰到容器边界之前卡住。

虽然这里的第一个问题可以通过替换 when style 来缓解一点border，outline但.ui-widget-content修复第二部分的唯一方法是修复插件的代码。

推荐阅读