jQuery UI 可拖动/可排序/可放置在达到可放置限制时禁用放置

标签 jquery jquery-ui draggable droppable

JS Bin demo

任务:

我正在使用 jQuery UI 创建一个事件调度程序。事件有一定的长度(以分钟为单位),并且可以将它们拖到不同的日期,每个日期都有自己的最大长度(以分钟为单位)。在示例中,每天的最大长度为 480 分钟,并且不应允许插入超过 480 分钟的“事件”。

问题:

如果“事件”将导致“天”超过其最大时间长度(基于已放置在其上的元素的组合时间),则应禁用该“天”(不允许在此特定事件中放置) .

正如您从 demo 中看到的那样,我可以计算出每天事件的组合时间(“可用分钟数”在拖动停止时更新),但如果拖动的事件会导致“可用分钟数”变为负值。

最佳答案

这里最简单的事情是在开始时运行一个函数来检查是否有房间被预订满。我修改了您在此处提供的演示:revised demo

它当然可以进行一些改进,但本质上它会检查您正在拖动的事件的长度,并隐藏时间不足的任何房间的可排序 ul。我隐藏了房间,因为禁用它们会太晚生效。我还在html中在每个房间ul之前添加了一个span,以便在时间不足时显示。可能最好用 js 添加它,但不需要太多时间进行细化。

希望有帮助!

关于jQuery UI 可拖动/可排序/可放置在达到可放置限制时禁用放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3539708/

相关文章:

Jquery .uniqueId() 为小部件分配一个已使用的 id

jQuery 显示/隐藏不触发回调

jquery 在重新加载网站后恢复可拖动位置

jquery - 仅在今天显示完整日历

javascript - 轮询工作多长时间

javascript - jQuery 向左滑动动画

jquery - 0x800a1391 - JavaScript 运行时错误 : 'jQuery' is undefined - MVC 4

javascript - 强制 % 进入文本框,右对齐

html - 使剪辑路径与可拖动图像一起使用

javascript - JQueryUI 可排序的 thead 和 tbody 在拖动隐藏两个字段的行时缩小