jquery - 可调整大小的 div 的定位问题 - 有没有办法限制 .ui-resizable-se 的移动？

Question

我希望在我的网站上实现以下调整大小技术，让用户可以选择缩放模态框。它利用包装器触发其中内容的缩放。

我的代码在这里:https://codepen.io/jsprac/pen/LoMgWm

var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

// invisible wrapper is doing the resizing, so .ui-resizable-se corresponds to it... how could I limit its movement? currently, it's moving in respect to said wrapper. 

$wrapper.resizable({ 
  resize: doResize
});

function doResize(event, ui) {

  var scale;

  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}

doResize(null, starterData);

橙色框代表 .ui-resizable-se 句柄。我遇到了它的运动问题，因为它相对于 wrapper 定位。出于我网站的目的，我将包装器的背景设置为透明；我不希望它可见。

总结一下:当我缩放“非常具体的设计”的 div 时，.ui-resizable-se 句柄任意移动到其边界之外(与包装器相对应，用户看不到)。理想情况下，它应该位于“非常具体的设计”之上，并在其边界内移动/根本不动。我可能不得不探索其他选择，因为我很难找到解决方案。 (即关联的 jquery 依赖于包装器，因此，包装器是应该调整大小的元素)。

提前感谢您的任何见解!

Answer 1

我想出了一个解决方法；这不是最干净的代码，但通过调整变换 CSS 和定位，它可以缩放所有内容。

为了我的元素，我需要以像素为单位调整 div 的大小(而不是像 vh/vw 这样的响应单元)。同样，无论定位/使用像素如何，此技术都会按比例调整大小!

我完成的初始教程对完成此任务非常有帮助:https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

您还可以建立其他参数(如 JQuery“可调整大小”文档 - https://api.jqueryui.com/resizable/ 中所述)，例如 minWidth 和 minHeight。调整大小句柄不会调整大小，因此定义最小值尤为重要，这样句柄不会变得比内容本身大/看起来有问题。对于最大值，我这样做是为了让内容不能调整到大于窗口的大小(有一些填充)。此外，aspectRatio 必须设置为 true，这样句柄就不会随包装一起移动；它本质上就像一直按下“shift”键一样。

此处的工作演示:https://codepen.io/jsprac/pen/LoMgWm

$wrapper.resizable({
  aspectRatio: true, // acts as if shift key is always pressed
  // must create limits because the resize handle will remain the same! 
  minWidth: 200,
  minHeight: 200,
  // won't be able to scale as large as window
  maxWidth: windowWidth - 50, 
  maxHeight: windowHeight - 50,
  resize: doResize
});

我希望这对某人有所帮助，如果我的问题不是很清楚，我深表歉意。这是我的第一篇文章!