Question

我使用javascript组件创建了一个拆分器，但它仅适用于两列，如果我添加第三列，则开始出现调整大小的问题。

在下面的摘录中，调整大小的逻辑在哪里。

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/

中发布了我的项目

我应该考虑哪些参数来正确动态地计算尺寸？

Answer 1

我发现了两个问题：

你的第二个分手喜欢“跳”离你。这样做的原因是您没有考虑分隔符之前元素的大小，您可以通过将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。希望这会有所帮助。

Div splitter调整问题

1 个答案: