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/

我应该考虑哪些参数正确，动态计算规模的项目？

你的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。希望这可以帮助。

非常好，我可以看到需要计算和修正分离器位置。我没有正确考虑抵消。感谢您的回复，我希望这可以帮助其他打算在项目中使用分离器的用户。 – Nupi

我改造了我的分离器，我修改了鼠标事件，留下了所有的jquery语法，我相信代码更加清晰和有组织。分配器的预期结果仍然是给出的答案。然而，确定了另一种情况，第一次调整大小时，会有一个错误，在它正常工作之后移动剩余的列。更新后的代码：https：//jsfiddle.net/pLyqd2vk/ – Nupi

@Nupi你是对的。如果你第一次移动分隔符，那么某些东西（而不是你的代码）会改变每个'.panel'的宽度。我怀疑它与'.panel {width：100％;}'有关。我不知道这是一个真正的修复还是只是一个黑客，但让javascript确定每个面板的初始宽度将解决问题：https：//jsfiddle.net/et97gr0y/ – mmgross

Div拆分器调整大小问题

相关推荐