ドラッグ可能なJquery：イメージの移動を防ぐ方法

Question

イメージの移動を防止する方法。どのように画像の位置= 350の場合の動きを防止する。閉じ込めのような何か、ちょうど反対です。助けてください。このような

$('#image').draggable( 
       { 
        drag: function(event, ui) 
         {      
          if($(this).offset().left > 350) 
           { 
            //there should be a code prohibiting the 
            //movement of the image if its position is = 350 
           } 
         } 
       }); 

Answer 1

何か作業をする必要があります：私は少しの視覚的なフィードバックを追加

var leftLimit  = 350; 
var bLimitReached = false; 

$('#image').draggable ({ 
    drag: function (event, ui) { 
     var jThis = $(this); 

     if (ui.offset.left > leftLimit) { 
      bLimitReached = true; 
      jThis.trigger('mouseup'); 
      jThis.addClass ('dragLimitreached '); 
     } 
     else 
      jThis.removeClass ('dragLimitreached '); 
    }, 
    stop: function (event, ui) { 
     var jThis = $(event.originalEvent.target); 
     if (bLimitReached) { 
      jThis.offset ({left: leftLimit}); 
      bLimitReached = false; 
     } 
     setTimeout (function() { 
      jThis.removeClass ('dragLimitreached'); 
     }, 2000); 
    } 
}); 

注意を。

See it in action at jsFiddle.

ユーザーが別のドラッグを開始するには、マウスボタンをリリースする必要がありますので注意してください（やや直感的でなければなりません）。