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;
}

ジャバスクリプト

 $(".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