6

私が取り組んでいる小さなプロジェクトがあり、jqueryを使用した興味深い封じ込めの問題がありますdraggable：

基本的に、私は2つのdivを持っています-topとbottomです。次に、.draggable（{}）である3番目のdivがあり、上部と下部のdivのサイズを変更するためにドラッグできます。

-こちらをご覧ください：http：//jsfiddle.net/Kpt2K/7/

問題は、私が望むようにドラッグを封じ込めることができないということです。上記のフィドル<span>では、封じ込めを開始および終了する場所にオレンジ色のを配置します。

興味深いメモ：私は次のことをやってみました：

$('#container').innerWrap('<div id='containmentBox' />');

var containerHeight = $('#container').height();

$('#containmentBox').css({'height': containerHeight - 45);

これにより、下部の封じ込めは機能しましたが、上部のスパンは機能しませんでした。なので、使いこなせていると思いますcontainment: [x1,y1,x2,y2]が、使い方がよくわかりません。

フィドルを見て、ドラッグ可能な動きを2つのオレンジ色のスパンの内側に制限するために何を考え出すことができるかを教えてください。

4

4 に答える 4

8

包含オプションを使用すると、配列を格納する位置を設定できます。これを試して：

var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;

$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

JSFiddleの例

于 2012-12-28T21:33:12.110 に答える
5

を使用することもできます。これにより、ドラッグ可能なアクションが発生する前のサイズを動的に設定できるhelper:を追加できます。divこれにより、実際にはまだページの一部ではありませんが、封じ込めで参照できます。を使用する場合、ドラッグ可能な関数が包含要素を検索するstart:までに、これdivは存在しません。あなたはでクリーンアップすることができますstop:

$(<<selector>>).draggable({
    helper: function (event, ui) {
        var target = $(this).clone();
        var oBody = $(document).find('body');
        var containmentDiv = $('<div id="div_containment"></div>');
        containmentDiv
            .css('top',calculatedTop)
            .css('left',calculatedLeft)
            .css('width',calculatedWidth)
            .css('height',calculatedHeight)
            .css('position','absolute');
        containmentDiv.appendTo(oBody);
            target.children('div').remove();
            target.css('background-color','#f00');
            return target;
        },
    stop: function(event, ui) {
        $(document).filter('body').find('#div_containment').remove();
    },
    containment: "#div_containment"   //containment via selector
});

helper:JavaScriptオブジェクト参照を使用して、他の場所で計算値を設定できます

于 2013-09-09T12:40:09.507 に答える
2

2つの停止要素で区切られたバウンディングボックスに封じ込めを制限できます。

var top = $("#stop-top").offset().top + $("#stop-top").height();
var bottom = $("#stop-bottom").offset().top - $("#bar").height();
$('#bar').draggable({axis: 'y', containment : [0, top, 10000, bottom] });

JsFiddle： http: //jsfiddle.net/Kpt2K/9/

于 2012-12-28T21:32:30.847 に答える
2

確かに、ドキュメントは薄いです-私はそれを理解するために多くのテストをしなければなりませんでした。

私の間違いは、包含配列がドラッグ可能な要素が移動できる境界を定義し、[x、y、幅、高さ]として定義されていると考えていましたが、包含配列は左上と右下の点を定義していることがわかりました。含まれている要素の原点が移動できる[x1、y1、x2、y2]として定義された境界を定義します。

これは、最後の2つの配列要素がwとh（長方形のプロパティ）ではなくx2とy2（ポイントのプロパティ）として定義されているという意味で理にかなっていますが、ドキュメントには、含まれている要素との関連でこれらのパラメーターが正確に何を意味するかについてより具体的にする必要があります、およびどのコンテキスト内（含まれている要素の原点に対して）および座標系（含まれている要素の）。

于 2013-05-08T20:41:41.203 に答える