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

我的angular应用程序有一个容器，我正在生成动态列（通过动态组件），这些列有引导类。我的列最多可以是6个最大值和1个最小值。在从1->6或6->1,6->3等更改列数时，我会更新所有动态列的类，使总和始终为12

我需要通过从一侧拖动来调整这些列的大小，并更新相邻列的类，以便总数永远不会超过12。我搜索了很多东西，比如jQueryUI拖动和其他一些小技巧，但没有找到任何好的方法，或者它们非常像jQuery，或者根本没有

任何形式的建议、代码链接、文章或任何指导都将不胜感激

PS：我遇到过这个例子，但这是非常jQuery的方式，我在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>

这是我遇到的另一个例子，它只是在拖动时更新它的相邻列，例如，如果3列[3,4,5]，那么拖动第一列时，它将达到最大值[6,1,5]，即它不会进一步更改为第三列[7,1,4]

我的容器列看起来像

---

我之所以回答这个问题，是因为我刚刚找到了一份接近我想要实现的目标的工作，并且在某些方面对某人有所帮助，但这仍然是我所遵循的示例的精确解决方案

这给了我一个大概的想法，怎样才能实现。因此，我计算了元素上的

mousedown

事件和文档上的

mouseup

事件上的鼠标X轴，从中获得最终的X轴，然后计算方向（左或右），并更新相应的引导类对。e、 g.有3列[3,4,5]，因此，将第一列向右拖动，我也会更新它[4,3,5]

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

也许这会对您有所帮助。