javascript - 当宽高比为 true 且包含父级时，jQuery ui 可调整大小中断 nw 句柄

Question

我正在尝试为具有自定义句柄的子元素实现可调整大小的 jquery ui。我已经使用以下代码成功实现了该功能

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 handle 调整大小时，当我将它移动到父级的最左 Angular 时，它会破坏纵横比。

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

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

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

他们是否在 jquery ui 中调整大小或我正在做任何工作？

请帮我解决这个问题？

Answer 1

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

您需要使用 position:absolute 放置子元素，并为父元素分配 5px 的内边距。然后在调整功能大小时，只需寻找顶部或左侧接近边界。我检查它距离边界 3px。一旦发生这种情况，就会触发鼠标弹起事件，因此停止调整大小。在此捕获 child 的顶部和左侧位置之前。这样您就可以将其重新定位到鼠标松开之前的最后位置。