jQueryのUIの逆方向のサイズは

Question

です。ページの右側に浮動小数点のサイドバーがあり、コンテナの左側にあるハンドルを使用してサイズを変更できます。

現時点では、ハンドルを使ってサイドバーをドラッグすると、右にドラッグするとサイドバーが広くなり、左にドラッグすると小さくなります。逆のことはしません。つまり、左にドラッグするとサイドバーなどのサイズが大きくなります。

HTML構造を変更しないで、問題を解決するための簡単なJavaScript行があることをお勧めします。ここで

はフィドルです：https://jsfiddle.net/c01gat3/us8vktjq/

HTML

<div id="sidebar"> 
    <div id="drag"> 
    </div> 
</div> 

CSS

#sidebar{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 100% !important; 
    background-color: blue; 
} 
#drag{ 
    position: absolute; 
    left: -10px; 
    width: 10px; 
    height: 100%; 
    background-color:black; 
    cursor:ew-resize; 
} 

Javascriptを

$('#sidebar').resizable({ 
    minWidth: 100, 
    handles: { "w" : $("#drag") } 
}); 

Answer 1

あなたは、関連するCSSファイルを逃しています。

あなたのHTMLページに、次の参照を追加します。ここ

<div id="sidebar"> 
    <div id="drag" class="ui-resizable-handle ui-resizable-w"> 
    </div> 
</div> 

の作業フィドル：https://jsfiddle.net/us8vktjq/2/

もっとここに読む

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

が必要なクラスが含まれるように、あなたのHTMLコードを調整します。 http://api.jqueryui.com/resizable/#option-handles