2

要素をドラッグするときは計算を行っており、特定のクリティカルが一致するときはドラッグを一時停止したいと思います。

マウスアップイベントをトリガーしたくないので、一時停止します。

このJSFIDDLEに完璧な例を設定しました

コンテナと長方形のリストをご覧ください。私が達成したいのは、封じ込めとはやや反対です...

包含を.draggable_wrapperに設定する場合、ULリストは内部に制約されます...私はそれを望んでいません

私が欲しいのは、リストをドラッグするときに、リストの位置がゼロ（> 0）より大きい場合、右へのドラッグを一時停止し、左（つまり負の位置）へのドラッグのみを許可することです...

最初のLIの左の境界線がコンテナの左の境界線の右側に到達することを望んでいません...

反対側ではまったく同じことです....左にドラッグすると...8。liの右の境界線がコンテナの右の境界線と交差するときに停止します（これは、位置が-55px未満の例で発生します） ;

読みやすくするために

$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;

if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;

});

どうやってやるの？拘束するときにも同様のことが行われます

4

3 に答える 3

8

offset（）を使用してラッパー要素の座標を取得し、包含オプションで配列を渡すことにより、独自の包含ボックスを提供できます。

var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
    distance: 3,
    axis: "x",
    revert: false,
    scroll: false,
    containment: [
        wrapperOffset.left - 55,
        wrapperOffset.top,
        wrapperOffset.left,
        wrapperOffset.top
    ],
    drag: function(e) {
        $('#posx').val($(this).position().left);
    }
});

更新されたフィドルはここにあります。

于 2012-10-22T18:08:12.583 に答える
1

条件がfalseの場合、ドラッグされている要素の位置を上書きして同じ位置を適用できます。

このフィドルは、位置のオーバーライドの例です：http: //jsfiddle.net/QvRjL/74/

このフィドルは、ドラッグされた要素がコンテナの境界の近くにあるかどうかを確認する方法の例です：http: //jsfiddle.net/pPn3v/22/

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
}); 

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position

            if(myCondition)
            {
                //The draggable element can be moved
                ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
                ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
            }
            else
                return false; //No move allowed
        });
});
于 2012-10-22T18:00:33.380 に答える
0

ドラッグ可能な領域の境界を定義することにより、ドラッグ可能な要素の移動を制限/制限することができます。ここでjqueryUIの例を見てください

ドラッグを制限するために外部の親/封じ込めを持つことは可能ですか？あなたは以下のようなことをすることができます..

$( "#draggable5" ).draggable({ containment: "parent" });

この親が両側に拡張されている場合、計算の制約を満たします。

お役に立てれば ..

于 2012-10-22T18:05:21.773 に答える