jquery - サイズ変更可能な 2 列のレイアウトをドラッグ

Question

jQuery ui を使用してサイズ変更可能なドラッグ レイアウトを作成しようとしました

http://jsfiddle.net/3zLRJ/

しかし、私の本当の目的は次のようなものでした

jQuery Uiメソッド、または利用可能な他のプラグインで作成することは可能ですか?

Answer 1

プラグインはデフォルトではサポートしていないため、目標を達成するために始めました。div を の関数にハード コードしただけですresize event。動的にするのはあなた次第です ;)。

var total_width = 500;

$("#div1").resizable({
    grid: [1, 10000]
}).bind( "resize", resize_other);


function resize_other(event, ui) {
    var width = $("#div1").width();

    if(width > total_width) {
        width = total_width;

        $('#div1').css('width', width);
    }

    $('#div2').css('width', (total_width - width));
}​ 

フィドルの例

お役に立てれば！

Answer 2

handlesdiv のプロパティを設定します: http://jsfiddle.net/3zLRJ/5/

ただし、resizeイベントを介して一方のサイズが変更されている場合は、両方の div を調整するコードを追加する必要があります。

もう 1 つのオプションは、2 つの間に 3 番目の div を作成し、それを にしてdraggable、そのモーションを左右のみに制限することです。次に、dragイベントでその周りの div を調整します。