javascript - Div拆分器调整大小问题

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 .希望这会有所帮助。