1

jquery uiを使用して、ドラッグ可能な引き戸の効果を作成しようとしています。HTMLは次のとおりです。

<div id ="home-elev-door" class="elev-door-wrap">           
        <div class="elev-door"></div>
</div>

私が現在持っているコードはこれです：

var elevWrap = $('.elev-door-wrap')

$(function() {
    $( ".elev-door" ).draggable({
        cursor: 'pointer',
        axis: 'x',
        drag : function(event, ui) { ui.position.left = onDragElev(ui.position.left); },
        });
});

function onDragElev(left){
    if ( left > 0 ) { left = 0; }
    else if ( (elevWrap.width()+left) < 27 ) { left = 27-elevWrap.width(); }
    return left;
}

これが基本的に行うことは、ドアを左右にスライドさせ、親div内でドラッグできる距離に関して27pxの制限を設定できるようにすることです。ただし、これを逆にして、制限が右側のみになるようにします。'left'のすべてのインスタンスを'right'に変更しようとしましたが、これは機能しないようです。代わりに、両側の親divからまっすぐドラッグします。

これに関する助けをいただければ幸いです。よろしくお願いします。

更新：私が意味することを説明するのに役立つjsフィドルリンクがあります。うまくいけば、それが役立ちます。 http://jsfiddle.net/metallikat79/RCGDH/

4

1 に答える 1

1

それを止めた。必要なのは、封じ込めのための 1 行のコードと、制限として座標の配列を渡すことだけでした。

containment: [0, 0, 200, 0]

これは、JS Fiddle に関する私の更新された作業例へのリンクです: http://jsfiddle.net/metallikat79/RCGDH/2/

于 2012-07-31T08:37:44.527 に答える