【问题标题】:Javascript Grid UI - Draggable & ResizeableJavascript Grid UI - 可拖动和调整大小
【发布时间】: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 - 是的,我知道这一点,但我正在寻找是否有现成的东西可以完成上述所有操作,它结合了拖动和调整大小,捕捉到网格并且不允许重叠

标签: jquery jquery-ui javascript javascript-framework


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-18
    • 2014-01-16
    • 2021-11-08
    • 2016-02-02
    相关资源
    最近更新 更多