javascript - 通过拖动调整 Bootstrap 列的大小

Question

我的 Angular 应用程序有一个容器，我正在生成动态列(通过动态组件)，这些列有 Bootstrap 类。我的专栏最多可以有 6 个，最多 1 分钟。在从 1->6 或 6->1,6->3 等更改列数时，我更新了所有动态列的类，因此总和始终为 12。

我需要通过从一侧拖动来调整这些列的大小并更新相邻列的类，因此总数永远不会超过 12。我搜索了很多东西，比如 jQuery-ui 拖动和其他 fiddle ，但也没有找到任何好的方法，他们要么完全采用 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] 的最大值，即它不会进一步更改为第 3 列 [7,1,4]

我的容器列看起来像

Answer 1

我正在回答这个问题，因为我刚刚找到了一个接近我想要实现的目标并在某种程度上对某人有帮助的工作，但它仍然是我所关注示例的精确解决方案。

这fiddle给了我一个大概的思路，怎么才能实现。所以我在元素上的 mousedown 事件和文档上的 mouseup 事件上计算了鼠标 X 轴，我得到了最终的 X 轴，然后我计算了方向(左或右)并更新相应的一对 Bootstrap 类。例如有 3 列 [3,4,5] 所以在将第一列向右拖动时我也更新它 [4,3,5]

但它仍然滞后于平滑度或捕捉(在某些 x 轴被覆盖后更新列)