Javascript Grid UI - 可拖动和调整大小

Posted 2023-02-22

【中文标题】Javascript Grid UI - 可拖动和调整大小

【英文标题】：Javascript Grid UI - Draggable & Resizeable

【发布时间】：2014-04-15 00:11:54

【问题描述】：

我不确定这是否是提出此类问题的正确位置，但我正在寻找一个执行以下功能的 javascript 组件：

有一定数量的列/行 网格中将包含多个项目，项目的宽度可以分布多列和多行但适合网格 用户必须能够拖动元素，但不能与其他元素重叠 用户必须能够在所有方向上调整元素的大小，但不能与其他元素重叠 附加到调整大小/拖动事件，以便与后端传达此类更改

下图描绘了我正在寻找的视觉示例。在下面的示例中，X 轴代表时隙，Y 轴代表表号，因此下面的红色块表示：

表 #2 分配时间为 12:00 - 15:00 表 #4 分配时间为 15:00 - 17:00 表 #6 和 7 分配时间为 14:00 - 16:00

【问题讨论】：

@AsifMahamud - 是的，我知道这一点，但我正在寻找是否有现成的东西可以完成上述所有操作，它结合了拖动和调整大小，捕捉到网格并且不允许重叠

【参考方案1】：

我不确定它是否在您需要时可用，但gridster 似乎可以满足您的所有需求。

【讨论】：

这听起来很有趣。我将更深入地研究它。感谢您的推荐！

【参考方案2】：

经过多次研究并没有找到合适的东西，我只是使用 jQueryUI 作为概念证明做了一些简单的事情，可以在 my pen on CodePen 上看到它支持创建 5 x 5 网格，示例 3'已预订的插槽，您可以将其拖到粉色插槽上并调整大小。

不幸的是，jQueryUI 有一个很老的 bug 并且从未修复，它是 revert 'invalid' with grid doesn't return to start position with jQuery UI Draggable。