Resize bootstrap columns by dragging them

Question

My angular application has a container and I am generating dynamic columns (via dynamic components), these columns have bootstrap classes. My columns can be upto 6 max and 1 min. On changing number of columns from 1->6 or 6->1,6->3 etc I update all dynamic column's classes so total sum is always 12.

I am required to resize these columns by dragging from one side and to update adjacent column's classes so total is never exceeds 12. I have searched quite few things like jQuery-ui dragging and other fiddles but not got any good approach either they are very much in jQuery way or none.

Any help would be highly appreciated in form of suggestion,code link,article or any direction.

PS: I have came across this e.g. codepen for bootstrap resizing but it is very jQuery way and I am looking something similar in angular 5.

<div class="container">
    <div class="grid">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
        </div>
    </div>
</div>

This another example I have came across, that it simply updates it's neighbour columns on dragging e.g. if 3 columns [3,4,5] so on dragging first column it will go to max of [6,1,5] i.e. it will not go further changing to 3rd column [7,1,4]

and my container columns look like

https://stackoverflow.com/questions/18368485/angular-js-resizable-div-directive maybe this will help you. — Khyati Chandak, Sep 04 '18 at 07:25

score 2 · Answer 1 · answered Sep 08 '18 at 11:36

I am answering this question because I just got a work around close to what I want to achieve and helpful to someone in someway, but still it is exact solution of the example that I am following.

This fiddle gave me a general idea, how can be achieved. So I calculated the mouse X-axis on mousedown event on element and mouseup event on document where I get final X-axis, then I calculates the direction (left or right) and updates the corresponding pair of bootstrap classes. e.g. having 3 columns [3,4,5] so on dragging first column towards right direction I updates it too [4,3,5]

But it still lags the smoothness or snapping (after certain x-axis covered then updates the column)

Resize bootstrap columns by dragging them

1 Answers1