jquery-ui：在視口外拖動元素

Question

我有一個隱藏在視口之外的菜單的情況。

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#menu { 
    position: absolute; 
    width: 100px; 
    height: 100%; 
    top: 0; 
    right: -100px; 
} 

我也有一個可拖動的元素。現在，當我拖動可拖動到右側並嘗試將它移到視口外（也在右側）時，我可以通過以某種方式將視口向左移動來使菜單可見。結帳jsfiddle 如何禁用此行爲？

Answer 1

您可以使用滾動選項來防止滾動頁面。

$("#draggable").draggable({scroll: false }); 

DEMO

可以與containment: "parent"一起使用，以防止盒伸出其父。

您的代碼似乎正在發生的事情是，當您到達角落時頁面滾動，然後從未向後滾動，因爲您已將overflow: hidden設置爲body。

使用scroll: false的缺點是您無法將元素向下拖動到頁面上。

文檔：http://api.jqueryui.com/draggable/#option-scroll

Answer 2

你的意思是你想保持它在containment - 如

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

Like this ?

---

http://api.jqueryui.com/draggable/#option-containment

---

更新：演示顯示遠離身體元素的'遏制' - 因爲@Mathias指出身體上的'隱藏'並不意味着你不能'拖'到它。因此，將這些元素從這些解決方案中解放出來。