jQuery UI拖放

Question

我嘗試使用這裏發佈的解決方案：jQuery Draggable and overflow issue，但我似乎無法讓它爲我自己工作。我有一個容器div（div＃容器），它包裹了我所有可拖動的div。 div＃容器的溢出設置爲auto。我使用了滾動選項並將其設置爲false，但它仍然滾動。有任何想法嗎？

我的HTML：

<div id="container"> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
    <div class="draggable"> Drag Me </div> 
</div> 

我的CSS：

div#container { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
} 

div.draggable { 
    padding: 3px; 
    font-size: 1.4em; 
} 

我的javascript：

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

Answer 1

這可能不是正是你要找的答案，但我想也許這是值得關注的情況。

Fluid Infusion框架包含一個Layout Reorderer，它可以完成您想要做的事情。你可以看到它的一個很好的演示 - 包括所有的來源 - 在這裏：http://fluidproject.org/releases/1.1.2/demos/reorderer/layoutReorderer/demo.html

輸液是使用jQuery構建的，並且可以以乾淨，簡單的方式添加到您的頁面。

Answer 2

也許，在你的CSS，「溢出：汽車」，應在容器上設置，即：

div#container { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
} 

div.draggable { 

} 

Answer 3

的問題是設置overflow:auto - 在需要的時候它definition是顯示垂直或水平滾動條。

可拖動的scroll：false並不意味着「不要創建滾動條」，而是如果可拖動的靠近div的邊緣以自動滾動或不滾動。

假設用戶有一個非常小的屏幕（400x400），並且您的頁面很大（2,000x2,000），並且他們想要將元素從一側拖到另一側。

With scroll:true，當元素靠近窗口的邊緣時，它會自動滾動元素。與scroll: false他們將不得不拖動到400px，放下元素，手動滾動，拿起元素並再次拖動。

scroll: true的另一個示例是在文檔中突出顯示文本的方式，當您接近頁面的邊緣時，程序會慢慢向下滾動，如果將光標移動到最下方，它會非常快速地滾動/突出顯示。

反正回到代碼。

爲了說明改變你的CSS這樣的：

div.draggable { 
    padding: 3px; 
    font-size: 1.4em; 
    border: 1px solid black; 
} 

然後拖動周圍的元素，當它接近，因爲div的寬度顯示的滾動條的一側。如果您打開scroll:true並注意它在您靠近邊緣時與您一起滾動。

現在你可以改變你的#container這個CSS來完全掩蓋其邊界以外的一切：

div#container { 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

隱藏手段，從來沒有創建滾動條，無論是我的外寬和高度是完全不可見。

因此，如果您現在拖動，您會注意到div邊框超出了容器範圍，並且沒有創建滾動條。現在通常你會爲可拖動的div定義一個硬寬度來防止這種情況，因爲overflow:hidden可能隱藏了關鍵內容。

這是fiddle。