2

我正在尝试为具有自定义句柄的子元素实现可调整大小的 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 句柄调整大小时，它会在我将其移动到父级的最左角时破坏纵横比。

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

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

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

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

请帮我解决这个问题？

在此处输入图像描述

4

2 回答 2

2

我的一个项目遇到了同样的问题并解决了这个问题。这是我的解决方案。

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

于 2014-07-31T10:30:46.680 回答
0

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

对我有用的是在调用 $.resizable() 之前为要调整大小的元素定义 max-width 和 max-height CSS 值

也许这会帮助别人。

于 2014-02-21T16:47:22.357 回答