divの幅をドラッグ可能にするにはどうすればよいですか？

Question

私は、設定コンソールを表示するために使用される別のdivの中に入れ子になったdivを持っています。

を私は子供のdiv要素が幅にリサイズすることができるように、子のdivの左境界線にドラッグ可能なハンドルを追加したい：ネストされたdivが次のように親の内側に位置固定しています。左のボーダーが配置されている別の非常に細いdivを追加する必要があります。これをドラッグすると位置が再計算され、divsのwidthプロパティのサイズが動的に変更されます。

JQuery UIに頼るのではなく、可能であればバニラJQueryに固執したいと思います。

Answer 1

私は、これはあなたが

ハンドル探しているものだと思う：ハンドルはサイズ変更のために使用することができます。

例：$(".selector").resizable({ handles: "n, e, s, w" });

HTML：

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS：

.parent { 
    position: relative; 
    width: 800px; 
    height: 500px; 
    background: #000; 
} 
.child { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 200px; 
    height: 100%;   
    background: #ccc; 
} 

JS：

$('.child').resizable({ 
    handles: 'n,w,s,e', 
    minWidth: 200, 
    maxWidth: 400 
}); 

チェックこのJSFiddle

EDIT：これはいわばバニラjQueryを使ってかなり容易に達成することができ、Updated fiddle

Answer 2

コメントに記載されているように、jQuery UIのサイズ変更可能な対話を使用します。この例を見てみましょう：http://jqueryui.com/resizable/#max-min

EDIT： だけ幅のサイズを変更することをロックダウンするには、のmaxHeightに等しいminHeightのセット。それはおそらくそれを行うべきである。

上記の例からコード：

$(function() { 
    $("#resizable").resizable({ 
    minHeight: 250, 
    maxHeight: 250, 
    minWidth: 200, 
    maxWidth: 350 
    }); 
}); 

EDIT 2： aplyingについては は、任意のさまざまな方法を扱う：ドキュメントを読んhttp://api.jqueryui.com/resizable/#option-handles

Answer 3

このコードを試してみてください。..

$('.child').resizable({ 
    handles: 'w' 
}); 

ます最大値と最小値を追加できます。幅

Answer 4

をCSSの問題を解決しました。しかし、私はより効率的なマークアップレイアウトを使用することをお勧めします、またはあなたはいくつかの相対的な位置/サイズの問題に実行されます。

私は1つのコンテナと2つの子供を使用します。子供の1つ（2番目または右側）には透明でハンドルの幅は狭くなります。 jQueryの場合は、そのハンドルにマウスのdownイベントをアタッチし、それに応じて他の子のサイズを調整します。それは大体どのように見えるでしょう。

HTML

<div id="container"> 
    <!-- Left side --> 
    <div id="left"> This is the left side's content! </div> 
    <!-- Right side --> 
    <div id="right"> 
     <!-- Actual resize handle --> 
     <div id="handle"></div> This is the right side's content! 
    </div> 
</div> 

はJavaScript

var isResizing = false, 
    lastDownX = 0; 

$(function() { 
    var container = $('#container'), 
     left = $('#left'), 
     right = $('#right'), 
     handle = $('#handle'); 

    handle.on('mousedown', function (e) { 
     isResizing = true; 
     lastDownX = e.clientX; 
    }); 

    $(document).on('mousemove', function (e) { 
     // we don't want to do anything if we aren't resizing. 
     if (!isResizing) 
      return; 

     var offsetRight = container.width() - (e.clientX - container.offset().left); 

     left.css('right', offsetRight); 
     right.css('width', offsetRight); 
    }).on('mouseup', function (e) { 
     // stop resizing 
     isResizing = false; 
    }); 
}); 

JSFiddle

Answer 5

下記のようにまた、あなたは開始時に何かをしたい場合に便利である、イベントハンドラをアタッチすることができますまたはサイズ変更の終わりを示します。

$("#resizeableElementId").resizable({handles: 'n,w,s,e', minWidth: 200, maxWidth: 600}); 

$("#resizeableElementId").on("resizestop", function(event, ui) { 

    console.log('resize ended'); 
    console.dir(event); 

}); 

jQuery UIも含める必要があります。ダウンロードして次のように追加してください：

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />