Div拆分器調整大小問題

我創建了一個使用javascript組件的拆分器，但它僅適用於兩列，如果我添加第三列，開始有調整大小的問題。Div拆分器調整大小問題

下面摘錄的是調整大小的邏輯。

var pos = (e.pageX - dragoffset.x);     

el.style.left = (pos) + "px"; 

var total_area = $(el).prev().width() + $(el).next().width(); 

var f_1 = (pos); 
var f_2 = (total_area - pos); 

$(el).prev().width(f_1); 
$(el).next().width(f_2);

我已經發布我的https://jsfiddle.net/m4y3rkqc/7/

我應該考慮哪些參數正確，動態計算規模的項目？

來源

2016-03-28 Nupi

你的JS小提琴看起來像調整列大小沒問題，究竟是什麼問題（我在鉻RN） –

@TimOgilvy 調整第三列時發生問題。這破壞了其他列的大小。 – Nupi

就這樣。你如何獲得第三列的初始位置/寬度？它看起來像被點擊時立即變爲零。 –

我提出了兩個問題：

你的第二個分隔喜歡從你「跳」了。其原因是，你沒有分頻器考慮之前採取元素的大小，你可以通過改變你的dragoffset計算

dragoffset.x = e.pageX - el.offsetLeft 
       + $(el).prev().offset().left - $(el).parent().offset().left;

注意解決這個問題我還添加了一個術語來校正父母的抵消。

另一件事是，您可以將分隔線完全移動到列的左側或右側，並且以半（？）的速度移動兩個分隔線，同時更改所有列的大小和分隔線本身的大小。爲了解決這個問題，需要進一步利用其價值前加2次檢查，以確保pos是不是出界：

if (pos < 0) {pos = 0;} 
if (pos > total_area) {pos = total_area;} 

var f_1 = pos; 
var f_2 = (total_area - pos);

這裏是your full code with these changes。希望這可以幫助。

來源

2016-03-28 01:43:50 mmgross

非常好，我可以看到需要計算和修正分離器位置。我沒有正確考慮抵消。感謝您的回覆，我希望這可以幫助其他打算在項目中使用分離器的用戶。 – Nupi

我改造了我的分離器，我修改了鼠標事件，留下了所有的jquery語法，我相信代碼更加清晰和有組織。分配器的預期結果仍然是給出的答案。然而，確定了另一種情況，第一次調整大小時，會有一個錯誤，在它正常工作之後移動剩餘的列。更新後的代碼：https：//jsfiddle.net/pLyqd2vk/ – Nupi

@Nupi你是對的。如果你第一次移動分隔符，那麼某些東西（而不是你的代碼）會改變每個'.panel'的寬度。我懷疑它與'.panel {width：100％;}'有關。我不知道這是一個真正的修復還是隻是一個黑客，但讓javascript確定每個面板的初始寬度將解決問題：https：//jsfiddle.net/et97gr0y/ – mmgross

Div拆分器調整大小問題

回答

相關問題