拖動遏制和調整窗口

Question

我有這樣的代碼

$(window).resize(function() 
     {  
      x2 = $('#mask').offset().left; 

     }); 

    $(image).draggable({cursor: 'move', containment: [ 0, 0, x2, 0]}); 

但我不知道如何實現拖放圖片，以反映瀏覽器窗口的大小。

所有我試圖做的，但它並不能正常工作或不工作。我累了。請幫我

Answer 1

你所有的resize代碼不會被更新變量x2。該Draggable不訪問變量，它有你通過它的值的副本。

您可以更新Draggable的遏制矩形：

// Presumably you declare and initialize `x2` somewhere 
// ... 

// Create the Draggable with the initial bounds 
$(image).draggable({cursor: 'move', containment: [ 0, 0, x2, 0]}); 

// Watch for resize 
$(window).resize(function() {  
    // Recalc 
    x2 = $('#mask').offset().left; 

    // Update the existing draggable with its new bounds 
    $(image).draggable("option", "containment", [ 0, 0, x2, 0]); 
}); 

另外，雖然，我想看看這條線在resize處理：

x2 = $('#mask').offset().left; 

大多數的時候，窗口大小不會影響元素的左側座標。它可以是，如果元素是行內或東西，所以它受到的自動換行，或者如果它是由花車周圍移動，或它的位置由一個百分比，或者一些其他的東西定義，但最的時間left是唯一不會改變的座標。

還要注意的是，如果你創建Draggable爲定義要能夠拖動它的邊界的元素中的子元素，你可以擺脫resize處理程序的完全，只是使用的選項containment: "parent"。