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

2023-12-14

JS Bin 演示

Task:

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

Problem:

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

正如你可以看到demo,我可以计算出每天事件的组合时间(“可用分钟数”在拖动停止时更新),但如果拖动的事件会导致“可用分钟数”变得消极。


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

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

希望有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery UI 可拖动/可排序/可放置在达到可放置限制时禁用放置 的相关文章

  • IE8 中字符串的 indexOf 的替代函数是什么?

    我用过indexOf检查句子中是否存在特定文本 如下所示 var temp temp data not available if temp indexOf datas 0 alert True else alert false 我面临的问题
  • 如何处理 AJAX 请求中的会话超时

    我相信你们都熟悉使用 AJAX 的投票系统 嗯 看那边 我有类似的东西 当你投票赞成或反对时 它使用 AJAX 从 votes php 请求新值 问题是我正在使用会话来获取用户 ID 因此一个人只能投票一次 如果他们在页面上坐了一个小时然后
  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作?

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则
  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o
  • Ajax - 限制列表的加载,然后在滚动上加载其余部分

    我有一家商店 在一个页面上显示某个类别的所有产品 这是店主喜欢的方式 因此不能选择分页 为了缩短某些重类别的加载时间 我希望实现一个可以加载许多产品的脚本 li s然后在页面滚动上加载另一组 页面就是用这个结构生成的 div ul clas
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • jQuery输入文件点击方法和IE上拒绝访问

    我尝试仅使用一个按钮作为输入文件 它在 Firefox Chrome Safari 中工作正常 但在 IE 中不行 提交表单时我总是收到 访问被拒绝 的消息 代码 input file click 有真正的解决方法吗 我在谷歌上浪费了大约2
  • jQuery 表格排序

    我有一个非常简单的 HTML 表格 有 4 列 Facility Name Phone City Specialty 我希望用户能够排序设备名称 and City only 我如何使用 jQuery 进行编码 我发现了这个 我想我应该投入
  • 如何禁用 body 元素的滚动?

    如何禁用正文滚动 body css overflow hidden 仅隐藏滚动条 但不会禁用滚动 我想禁用正文的滚动 但我想保持其他分区的滚动完好无损 试试这个 CSS 不需要 jQuery 评论后更新 尝试指定高度body too
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 如何动态调整jqgrid到当前窗口大小?

    如何动态调整jqgrid到当前窗口大小 基于javascript jQuery 最好的例子在这里 TinyMCE 去 http www tinymce com tryit full php http www tinymce com tryi
  • HTML 下拉菜单禁用 Javascript 中的选项

    Question 下面的代码是隐藏所选项目下拉列表中的选项 因此 当用户选择该选项时 它将隐藏所有下拉选择列表中的所选值 我现在有四个下拉选择 我想实现像当下拉选择被触发时它将启用当前选择的选项值 意味着用户能够在用户触发时选择回下拉选择中
  • 从旧的外部 Javascript 更改 React 组件的状态?

    如何从旧的 jQuery soup 中更改 React 组件的状态 代码 我有一个这样的组件 var AComponent React createClass getInitialState function return ids rend
  • 在 Select(DropDown) 更改事件上重新初始化 Jquery DataTable

    我正在使用 Jquery UI DataTable 它被填充select DropDown change事件 在PageLoad没关系 当我表演时dropdown change event DataTable is Reinitialize
  • 无法修剪电子邮件输入中的空格

    我试图修剪电子邮件输入上的尾随空格 但相信将修剪应用于电子邮件输入存在问题 任何人都可以解释为什么会出现这种情况 或者我的假设是否错误 应用此代码后 该代码适用于密码字段 但不适用于电子邮件字段 EDIT 它是一个 Ruby on Rail
  • Jquery UI 可调整大小的问题超出了遏制范围(也使用了可拖动)

    我面临的问题是 div 的可调整大小 当我将它与 Draggable 一起使用时 它会出现问题并且无法调整其宽度方向的大小 如果我单独使用可调整大小 那就没问题了 但我需要让它与可拖动功能一起使用 请建议 单击演示的 jsFiddle 链接
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 如何使用 jQuery Ajax 将 PHP 数组值传递到另一个文件?

    这是我的代码
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一

随机推荐