通过拖动调整Bootstrap列大小

Question

我的Angular应用程序有一个容器，我正在生成动态列（通过动态组件），这些列具有Bootstrap类。我的列最多可以有6个，最少为1个。当从1->6或6->1, 6->3等更改列数时，我会更新所有动态列的类，以便总和始终为12。

我需要通过从一侧拖动来调整这些列的大小，并更新相邻列的类，以使总和永远不超过12。我已经搜索了很多东西，如jQuery-ui拖动和其他fiddles，但没有得到任何好的方法，它们要么非常使用jQuery，要么根本没有。

任何帮助都将不胜感激，可以是建议、代码链接、文章或任何方向。

PS：我遇到了这个例子。codepen for bootstrap resizing但它非常使用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]。

我的容器列看起来像

- Mohd. Monis

---

也许这个链接可以帮到你：https://dev59.com/XWMl5IYBdhLWcg3we283 - Khyati Chandak

Answer 1

我回答这个问题是因为我找到了一个解决方案，可以达到我想要的效果并对某些人有所帮助，但这仍然不能完全解决我遇到的问题。

这个例子给了我一个大致的思路。在元素的mousedown事件和文档的mouseup事件中，我计算得出鼠标X轴坐标，然后计算方向（左或右），并更新相应的bootstrap类对。例如，有3列[3,4,5]，当我将第一列向右拖动时，它变成了[4,3,5]。

但仍然存在平滑度或吸附（在覆盖一定的x轴后更新列）的问题。

- Mohd. Monis