当宽高比为真且包含父级时，jQuery ui可调整大小的中断句柄

Question

我正在尝试使用自定义句柄为子元素实现jquery ui resizable。 我已使用以下代码

成功实现了该功能

HTML

 <div class="container">
   <div class="parent">
     <div class="child"></div>
   </div>
 </div>

CSS

.container {
 margin:40px;
}

.parent {
  background: yellow;
  width: 250px;
  height: 500px;
  position: relative;
}

.child {
  background: red;
  width: 150px;
  height: 80px;
}

.ui-resizable-ne,
.ui-resizable-se,
.ui-resizable-nw,
.ui-resizable-sw,
.ui-resizable-n,
.ui-resizable-s,
.ui-resizable-w,
.ui-resizable-e {
  background: white;
  border: 1px solid black;
  width: 9px !important;
  height: 9px !important;
}

.ui-resizable-se {
  background-image: none !important;
  right: -5px !important;
  bottom: -5px !important;
}

.ui-resizable-n,
.ui-resizable-s {
  left: 50% !important;
  margin-left: -5px !important;
}

.ui-resizable-e,
.ui-resizable-w {
  top: 50% !important;
  margin-top: -5px !important;
}

JAVASCRIPT

 $(".child").resizable({
     aspectRatio:true,              
     minWidth:100,
     maxWidth:$(".parent").width(),                     
     containment:"parent",
     handles:"all"
 });

但我的问题是，当我尝试使用nw手柄调整大小时，它会打破纵横比，因为我将其移动到父母的大多数角落。

我发现其他句柄没有任何问题，但只有nw句柄。

我正在使用最新的jquery和jquery ui版本。

现场演示 - http://jsbin.com/OJolIKA/1/edit

是他们在jquery ui中可以调整大小的任何错误，还是我在做什么工作？

请帮我解决这个问题？

Answer 1

我的一个项目遇到了同样的问题并且解决了这个问题。 Here is my solution

您需要将child放在position：absolute并为父级分配5px填充。然后在调整大小的函数时，只需查看顶部或左边靠近边界。我检查它距离边界3px。一旦出现这种情况，只需启动鼠标事件，因此停止调整大小。 就在此之前捕获孩子的上下左侧位置。这样你就可以在鼠标移动之前将它重新定位到最后一个位置。

Answer 2

我遇到了类似的问题，在相对定位的父元素中使用可调整大小，宽高比为true，父元素包含，以及定义的最大宽度和高度。行为略有不同，因为子元素的大小会不规则地跳跃。

对我来说有用的是在调用$ .resizable（）

之前定义要调整大小的元素的max-width和max-height CSS值。

也许这会帮助别人。