2

仕切りを上下にドラッグして、固定ページの高さで仕切りの上下のdivのサイズを変更できるようにしたいと思います。これらのdivはテーブルにある可能性がありますが、そうである必要はありません。

つまり、垂直方向のサイズ変更だけが必要ですが、 jsFiddleサイトで何が起こるかをエミュレートできるようにしたいと思います。jsFiddleはmooToolsを使用していますが、jQueryで使用したいと思います。

重要な問題の1つは、実際に動的に構築されるまで、仕切りの上のdivのサイズがわからないため、設定された絶対位置から始めることはできません。

前進するための最良の方法は何ですか？聞かなければ、車輪の再発明をしているような気がします:)

[ところで：似たような名前のいくつかの質問は、機能しないjsFiddleの例にリンクされています（たとえば、this）。

これまで私はこれを使用しました：

    $('.rsh').draggable({
        axis:'y',
        drag: function (event, ui) {            
            var offsettop = ui.offset.top;
            $(this).prev().css({
                height: offsettop
            });
    });

言うまでもなく、それはまだ機能していません。

4

3 に答える 3

6

誰かが将来に興味を持っている場合に備えて、私はこれでうまく動作するようにしました:

$('.rsh').draggable({
    axis: 'y', 
    containment: 'parent',
    helper: 'clone', 
    drag: function (event, ui) { 
        var height = ui.offset.top - 85; 
        $(this).prev().height(height); 
    } 
});

これがフィドルです。

の使い方がcloneポイントです。ドラッグ可能な要素 ( .rsh) は相対的であるため、クローンを使用しない場合、前の の高さの変化の影響も受けるため、要素はマウスの 2 倍の距離まで移動しdivます。

注: これ- 85は、ヘッダーなどを考慮してページ レイアウトを変更しただけです。

于 2012-06-16T09:41:51.157 に答える
2

これは Nick のコード (本当に役に立ちました、ありがとう!) のバージョンで、後続の仕切りを静的に保つことができます。ドラッグされた仕切りの上と下の div を反対方向にサイズ変更することで機能します。

$('.rsh').draggable({
    axis: 'y'
    ,containment: 'parent'
    ,helper: 'clone'
    , start: function(event, ui) { 
        $(this).attr('start_offset',$(this).offset().top);
        $(this).attr('start_next_height',$(this).next().height());
    }
    ,drag: function (event, ui) {           
        var prev_element=$(this).prev();
        var next_element=$(this).next();
        var y_difference=$(this).attr('start_offset')-ui.offset.top;            
        prev_element.height(ui.offset.top-prev_element.offset().top);
        next_element.height(parseInt($(this).attr('start_next_height'))+y_difference);
    } 
});
于 2012-08-31T13:34:33.340 に答える
1

これはニックのバージョンの別の代替手段です。これは、水平ハンドラーを自動的に上に移動し、素晴らしい効果としてゼロにします。また、両セクションの高さサイズを相互に調整します。

$('.horizontal_handler').draggable({

        axis: 'y', 
        containment: 'parent',
        helper: 'clone', 
        drag: function (event, ui) { 

            var height = ui.offset.top - 220 // 220 : initial top margin to the previousDiv
            , referenceHeight = nextDivHeight + previousDivHeight  //500 px initial height size
            , previousSection = $(this).prev()
            , nextSection = $(this).next();

            if ((nextSection.height() === 0) && (referenceHeight - height < 0)){
                return;
            }

            previousSection.height(height); 
            nextSection.height(referenceHeight - height ) ;


            if (nextSection.height()< 20){
                    previousSection.height( height+ nextSection.height() );
                    nextSection.height(0);
                }

            if (previousSection.height()< 20){
                    nextSection.height(referenceHeight - height - previousSection.height() );
                    previousSection.height(0); 
                }
        } 
    });
于 2013-12-19T14:06:27.720 に答える