jQuery UI可拖動限制

Question

我正在使用jQuery UI可拖動模塊，我想做一件簡單的事情，但我找不到任何使用Google的幫助（也許我搜索錯誤）。這是我的代碼：

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

正如你可能除了我想要防止達不到0.1低CSS左值dragable元素，但這個代碼不工作 - 如果我拖到元素超越CSS左邊的0它塊。你可以幫幫我嗎？

UPDATE：

@VisioN感謝你的幫助。現在一切都按我的意願工作。這是我的最終代碼。也許它有助於sonmeone：

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/

更新。另一種選擇是在拖動時更正內部值。

$("#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，right：200}

}）;

鏈接

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