web-dev-qa-db-ja.com

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

設定コンソールを表示するために使用される別のdiv内にネストされたdivがあります。ネストされたdivは、次のように親の内部に固定されています。

Div arrangement

ドラッグ可能なハンドルを子divの左側の境界線に追加して、子divの幅を変更できるようにします。これをドラッグして子divのwidthプロパティを動的にサイズ変更するために位置を再計算できるように、左側の境界が配置されている別の非常に狭いdivを追加する必要がありますか？

可能であれば、JQuery UIに依存するのではなく、バニラJQueryを使用したいと思います。

jquerycssjquery-uidraggableresizable
17
QFDev

これはあなたが探しているものだと思います

handles：サイズ変更に使用できるハンドル。

例：$( ".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：cssの問題を解決しました Updated fiddle

14
Praveen

いわば、これはVanilla jQueryを使用するとかなり簡単に実現できます。ただし、より効率的なマークアップレイアウトを使用することをお勧めします。そうしないと、相対的な位置/サイズの問題が発生します。

私は1つのコンテナと2つの子を使用します。子の1つ（2番目の子、つまり右側）には、透明だが幅が小さいハンドルが含まれます。 jQueryの場合は、マウスダウンイベントをそのハンドルに接続し、それに応じて他の子のサイズを調整します。おおよその外観は次のとおりです。

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

9
Austin Brunkhorst

コメントで述べたように、jQuery UI Resizableインタラクションを使用します。この例を見てみましょう： http://jqueryui.com/resizable/#max-min

EDIT：幅のサイズ変更のみにロックするには、minHeightをmaxHeightに設定します。おそらくそれで十分でしょう。

上記の例のコード：

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

EDIT 2：aplyingハンドルのさまざまな方法：ドキュメントを読む http://api.jqueryui.com/resizable/#option-ハンドル

3
AntonNiklasson

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

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

次に、最大幅と最小幅を追加できます

1
Sbml

以下に示すように、イベントハンドラーをアタッチすることもできます。これは、サイズ変更の開始時または終了時に何かを実行する場合に役立ちます。

$("#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" />
0
paulo62