达到可放置限制时，jQuery UI可拖动/可排序/可放置禁用禁用放置 [英] jQuery UI draggable/sortable/droppable disable drop when droppable limit is reached

问题描述

JS Bin演示

任务:

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

I'm creating an event scheduler using jQuery UI. Events are of a certain length (in minutes) and they can be dragged into different days, each with their own maximum length (in minutes). In the example, each day's maximum length is 480 minutes, and no more than 480 minutes worth of "events" should be allowed to drop in.

问题:

如果事件"将导致天"超过其最大时间长度(基于已放置在其上的元素的总时间)，则应禁用天"(此特定事件不允许删除)

If the "event" will cause the "day" to exceed its maximum time length (based on the combined times of elements already dropped on it), that "day" should be disabled (no dropping allowed for this specific event).

从演示中可以看到，我可以计算出每天发生的事件的总时间( 分钟可用"在拖动停止时进行了更新)，但我不知道如果事件被拖动将导致分钟可用"变为负数，我不知道如何禁用掉入这一天.

As you can see from the demo, I can figure out the combined time of events for each day ("minutes available" is updated on drag stop), but I don't know how to disable dropping into the day if the event being dragged would cause "minutes available" to go negative.

推荐答案

最简单的方法是在开始时运行一个函数，以检查是否有足够的房间被预订.我已经修改了您在此处提供的演示:修订后的演示

Easiest thing to do here to to run a function at start to check to see if any room will be fully booked. I've revised the demo you provided here: revised demo

它当然可以进行一些改进，但是从本质上讲，它会检查要拖动的事件的长度，并在没有足够时间的情况下隐藏所有房间的可排序ul.我把房间藏起来了，因为禁用它们太晚了.我还在时间不足的情况下，在要显示的每个房间ul之前的html中添加了一个跨度.最好将其与js一起添加，但没有太多时间进行细化.

It could certainly use some refinement but essentially it checks to see the length of the event you are dragging and hides the sortable ul of any rooms with insufficient time. I hid the rooms because disabling them would take effect too late. I've also added a span in the html before each room ul to be displayed when there is insufficient time. Probably best to add this with js but not a lot of time for refinement.

希望有帮助！

这篇关于达到可放置限制时，jQuery UI可拖动/可排序/可放置禁用禁用放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！