のjQuery UIのドラッグ可能な制限

Question

私はjQueryのUIドラッグ可能なモジュールを使用していますし、私は1つの簡単な事をしたいが、私はGoogleの（多分私は間違っ検索）を使用して、任意のヘルプを見つけることができません。これは私のコードです：

$("#table").draggable({ 
    axis: "x", 
    drag: function() { 
     if(parseInt($(this).css("left")) <= 0) 
     { 
      return false; 
     } 
    } 
}); 

あなたは、私が0より低いCSS左値に達するのドラッグ可能要素を防ぎたい。しかし、このコードは動作しない点が異なり得るので - 私はCSSを超えて要素をドラッグする場合は0、それのブロックを残しました。私たちを手伝ってくれますか？

UPDATE：

@VisioNはあなたの助けをありがとうございました。今はすべて私が望むように働いています。ここに私の最終的なコードです。多分それは息子を助けるでしょう：

var table_dim = [1898, 1024]; 
width = Math.round((table_dim[0]/table_dim[1])*$(window).height()); 
height = $(window).height(); 
$(document.createElement("img")) 
    .attr("src", "images/table.png") 
    .attr("height", height) 
    .attr("width", width) 
    .attr("id", "table") 
    .css(
     {"display": "block", 
     "position": "absolute", 
     "left" : -((width-$(window).width())/2)+"px", 
     "z-index": "-9999" 
    }) 
    .appendTo("body"); 


$("#table").draggable({ 
    axis: "x", 
    drag: function(event, ui) { 
     if (ui.offset.left < $(window).width()-width) { 
      $(this).data('draggable').position.left = $(window).width()-width; 
     } else if(ui.offset.left > 0) 
     { 
      $(this).data('draggable').position.left = 0; 
     } 
    } 
}); 

Answer 1

代わりにcontainmentオプションを使うのはどうですか？

$("#table").draggable({ 
    axis: "x", 
    containment: "document" 
});​ 

封じ込め値として、あなたは'parent'、'document'、'window'または[x1, y1, x2, y2]を使用することができます。

DEMO：http://jsfiddle.net/bAffp/

UPDATE。他のオプションは、ドラッグ中に内部値を補正することです。

$("#table").draggable({ 
    axis: "x", 
    drag: function(event, ui) { 
     if (ui.offset.left < 0) { 
      $(this).data('draggable').position.left = 0; 
     } 
    } 
});​ 

DEMO：http://jsfiddle.net/bAffp/3/

Answer 2

$（ "＃ドラッグ"）は、このコードを試しドラッグ（{

限界：{トップ：50、左：100、底：200、右：200}

}）。

リンクはあなたのソリューションは一つの欠点がある

http://jsfiddle.net/bAffp/2/