如何防止可調整大小和可拖動元素相互摺疊？

正如你所看到的，有2個被堆疊在彼此上方的簡單資料覈實。每個DIV也設置爲可調整大小和可拖動。但是，請注意，當您嘗試調整第一個元素的大小時，第二個元素將摺疊到第一個元素上。從我所看到的情況來看，這是因爲可調整大小會將元素更改爲絕對位置。我怎樣才能防止這種行爲？是否可以調整元素的大小，同時保留拖動元素的能力？請注意，如果您將元素更改爲具有相對位置（在.demo樣式中添加位置：relative！important），它可以防止崩潰，但是當您開始使用元素時，元素會「跳躍」調整大小或拖動。另一個奇怪的行爲。謝謝你的幫助。

來源

2011-05-17 naivedeveloper

在我的特定情況下，這裏是我做過什麼來解決這個問題：

resizeableObj.resizable({ 
    start: function(event, ui) {   
     resizeableObj.css({ 
      position: "relative !important", 
      top: "0 !important", 
      left: "0 !important" 
     }); 
    }, 
    stop: function(event, ui) { 
     resizeableObj.css({ 
      position: "", 
      top: "", 
      left: "" 
     }); 
    } 
});

正如你所看到的，在可調整大小的啓動事件，位置設置爲相對（通過拖動和音樂會可調整大小，增加一個絕對位置）並將頂部和左側設置爲0以防止有時看到的「跳躍」。在停止事件中，反轉這些更改。適用於我的情況，YMMV。

來源

2011-06-01 16:48:29 naivedeveloper

Err ...您無法在jQuery css函數中添加重要！作爲一種解決方法，在啓動時添加一個具有！important的CSS規則的類，並在停止時將其刪除。 – Jide 2014-01-22 19:21:11

只需將#container設置爲position: relative;即可。 http://jsfiddle.net/g7Cgg/1/

來源

2011-05-17 21:57:40 Zlatev

試過了。沒有運氣。嘗試調整大小時，較低的元素仍會在上層元素上摺疊。 – naivedeveloper 2011-05-17 22:07:11

如果固定高度適合您，請嘗試http://jsfiddle.net/g7Cgg/4/ – Zlatev 2011-05-17 22:12:12

爲什麼它會崩潰是可以理解的......我的意思是，爲了讓您能夠將元素定位到任何位置，它必須使用絕對定位，從而將其排除在流程之外。我只是好奇，在這個例子中有什麼方法可以使用resizable和draggable。 – naivedeveloper 2011-05-17 22:17:59

Chrome開發者工具表明當用戶拖動/調整大小時，jQuery UI使用style="position:relative"屬性。這將覆蓋CSS中的任何.demo{position:absolute}。

解決方法是設置您自己的style="position:absolute"（您可以使用jQuery css()方法），然後爲每個div顯式設置top和left。

$('.demo').css({position:"absolute"});

來源

2012-03-29 23:23:47 kippsoftware

找到一個更簡單的解決方案（這符合我的需要）; ！

內jQuery的ui.css，設置所需的位置，並添加重要，以確保它保持：

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */

來源

2014-04-28 09:14:52

使用此代碼，以保持窗口空間內的元素，而不同時拖動滾動：

$("#draggable").draggable({containment:"window", scroll: false})

來源

2017-11-10 10:22:44

如何防止可調整大小和可拖動元素相互摺疊？

回答

相關問題