通过拖动来调整引导程序列的大小

Question

我的angular应用程序有一个容器，并且正在生成动态列（通过动态组件），这些列具有bootstrap类。我的专栏最多可以包含6个最大值和1分钟。在从1-> 6或6-> 1,6-> 3等更改列数时，我更新了所有动态列的类，因此总和始终为12。

我需要通过从一侧拖动来调整这些列的大小，并更新相邻列的类，因此总数不得超过12。我搜索了诸如jQuery-ui拖动和其他小提琴之类的东西很少，但它们都没有任何好的方法完全采用jQuery方式或完全不采用。

任何帮助都会以建议，代码链接，文章或任何方向的形式受到赞赏。

PS：例如，我遇到了codepen for bootstrap resizing，但它是一种非常jQuery的方式，我正在角度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>

这是我遇到的另一个示例，它只是在拖动时更新了它的邻居列。如果3列[3,4,5]依此类推，则在拖动第一列时，它会移至[6,1,5]的最大值，即不会再更改为第三列[7,1,4]

我的容器列看起来像

Answer 1

我之所以回答这个问题，是因为我所做的工作接近我想要实现的目标，并且以某种方式对某人有所帮助，但这仍然是我所遵循的示例的精确解决方案。

这个fiddle给了我一个大概的想法，如何实现。因此，我计算了元素的mousedown事件和文档的mouseup事件的鼠标X轴，并获得了最终的X轴，然后计算了方向（左或右）并更新了对应的引导类。例如具有3列[3,4,5]，因此向正确方向拖动第一列我也对其进行了更新[4,3,5]

但是它仍然滞后于平滑度或捕捉（在覆盖了某些x轴之后更新了列）