Div splitter resize problems

I created a splitter using javascript component, but it works only with two columns, if I add a third column, start to have problems with resizing.

In the excerpt below is where is the logic to resize.

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);

I have posted my project in https://jsfiddle.net/m4y3rkqc/7/

What parameters should I consider to calculate the size correctly and dynamically?

Answers 1

  • I identified two problems:

    Your second divider likes to "jump" away from you. The reason for that is that you didn't take the size of the element before the divider into account, you can fix this by changing your calculation for dragoffset to

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

    Notice I also added a term to correct for the offset of the parent.

    The other thing is that you could move a divider completely to the left or the right of a column and beyond, moving both dividers at half(?) speed while changing the size of all columns and the size of the dividers themselves. To correct this, you need to add 2 checks to make sure pos is not out of bounds before further using its value:

    if (pos < 0) {pos = 0;}
    if (pos > total_area) {pos = total_area;}
    
    var f_1 = pos;
    var f_2 = (total_area - pos);
    

    And here is your full code with these changes. Hope this helps.


Related Articles