當動態內容發生變化時，jquery ui可拖動的div跳轉

我想在內容動態更改的頁面中使用jQuery UI的可拖動對象。不幸的是，當一個div的內容發生變化時，其他div往往也會移動。有沒有辦法來防止這種行爲？當動態內容發生變化時，jquery ui可拖動的div跳轉

理想情況下，我希望在內容發生更改後，任何捕捉的關係都會繼續保留。否則，如果div位置簡單地忽略了其他div的大小變化，那就太好了。

這裏是一個jsfiddle你可以看到我的意思。

2012-06-27 Abe

只是爲了澄清。您希望所有框的位置都是靜態的，但要改變它們的大小。所以當一個變得更大時，兩個div之間會有一個覆蓋層？ – Fermis

完美的解決方案是保持折斷的關係。因此，如果div A的左上角與B的右上角對齊，那麼在調整大小之後他們會保持這種狀態。第二個最好的解決方案是，當另一個div的內容發生變化時，沒有div移動，即A內容的變化不會導致B的位置發生變化。這兩個看起來都是合理直觀的界面。第一個更方便一點。 – Abe

您需要定位：絕對的div，沒有它們的親戚。然後，您需要將容器放置在相對位置，以保持容器內的div相對於容器的位置。

CSS更新：

#container{ 
    width:600px; 
    margin:auto; 
    padding:20px; 
    position: relative; 
} 
.box{ 
    width:50%; 
    padding:20px; 
    border:2px solid black; 
    position:absolute; 
}

有跡象表明，你需要找出其他問題。在第一次渲染時，兩個框將重疊。您需要預先設定頂部/左側的CSS值，以防止它們最初重疊。要麼使用html（您必須事先知道高度）或使用javascript（如果需要一次加載所有內容，您可能會遇到捕捉）。

警告。我不認爲絕對定位divs通常被認爲是一種好的做法。你可能想解釋你想要做什麼，如果適用的話，可以找到更好的解決方案。這個答案可能會做你想做的，但取決於你如何使用它將決定你是否應該。如果它的佈局，它可以得到相當的維護沉重，因爲你必須重新放置一切再次適合。容器內的每個div盒都將被絕對定位並相互忽略。相對於父項定位子項，就像一個自定義按鈕或div後面的菜單，這對絕對定位的項目很有用。

來源

2012-06-27 19:58:32 Recognizer

好問題。我正在設計的頁面有幾個「窗格」，其中包含用於與靜態文本文檔進行交互的工具。屏幕房地產方面，有一個大型文件和幾個小窗格。各種窗格的大小和用途會有所不同，因此使它們可拖動（和可摺疊）是有道理的。想想Adobe Photoshop的界面 - 我的用例非常相似。 – Abe

當動態內容發生變化時，jquery ui可拖動的div跳轉

回答

相關問題