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

Question

我不确定这是否是提出这样一个问题的正确位置，但我希望找到一个执行以下功能的javascript组件：

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

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

• 表＃2从12:00 - 15:00分配
• 表＃4从15:00 - 17:00分配
• 表＃6＆amp; 7从14:00 - 16:00分配

Answer 1

我不确定它是否在您需要时可用，但gridster似乎可以完成您所需的一切。

Answer 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。