カスタム ハンドルを持つ子要素のサイズ変更可能な 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のバグはサイズ変更可能ですか、それとも私は何か仕事をしていますか?
この問題の解決策を教えてください。