如何水平居中拖動模式

我有一個彈出窗口，應該是position:fixed和可拖動。問題是，無論何時彈出窗口，它都會使用css轉換，因此其所有屬性都會生成動畫。我試圖使用left:50%transformX:(-50%)來水平居中，但彈出窗口出現時水平跳動（因爲它動畫變換）。我也嘗試用左對齊：0右：0邊距：0自動;但是當你開始拖動時，窗口也會跳出位置。這些問題僅在窗口第一次出現時出現，或者在第一次拖動所有按預期方式運行後第一次拖動時出現。如何水平居中拖動模式

我將下列選項傳遞給可拖動的setter。

elem.draggable({ start: function() { 

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"}); 

} });

這撥弄中心與margin:0 auto here is a fiddle demonstrating my problem

這撥弄中心與left:50% transform:translateX(-50%);

second fiddle

來源

2016-01-17 naughty boy

包括相關代碼，如[的jsfiddle一個示例（http://jsfiddle.net），將是有益的。 –

對不起，我已經添加了小提琴。 –

的問題是，margin: 0 auto依賴於元素的left和right屬性設置爲0的事實。您看到跳躍，因爲jQuery UI操縱left定位，拖動元素後它不再是0。這同樣適用於transformX:(-50%)方法。如果left設置爲50%，則這將僅水平居中元素。

的解決方法是設置left: 50%，然後添加margin-left: -40px以置換元素的寬度（即，基於所述元件的寬度的一半的負左邊緣;在這種情況下-40px由於元件具有80px固定寬度）。

Updated Example

.box { 
    border-radius: 5px; 
    padding: 10px 15px 10px 15px; 
    min-width: 30px; 
    width: 80px; 
    height: 80px; 
    left: 50%; 
    margin-left: -40px; 
    position: fixed; 
    /* ... */ 
}

來源

2016-01-18 20:56:16

您是否嘗試過給模式的寬度，然後使用保證金：0汽車;典型的是爲了居中一個元素，你需要給元素一個寬度。

.centeredElement { 
    margin: 0 auto; 
    width: 960px; 
}

來源

2016-01-17 18:02:10 mrjamesmyers

對不起，我已經添加了小提琴。 –

當我將位置更改爲相對位置時，似乎在第一次單擊時工作正常，這是第一個小提琴示例 – mrjamesmyers

如何水平居中拖動模式

回答

相關問題