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

Question

JS Bin demo

任务：

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

问题：

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

正如您从demo 中看到的，我可以计算出每天事件的总时间（“可用分钟数”在拖动停止时更新），但我不知道如何禁用进入当天如果拖动的事件会导致“可用分钟数”变为负数。

Answer 1

最简单的方法是在开始时运行一个函数来检查是否有任何房间会被订满。我已经修改了您在此处提供的演示：revised demo

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

希望有帮助！

Answer 2

$( "#daybox" /*or selector for days elements*/ ).bind( "sortreceive", function(event, ui) {

   if(/*percent*/ >= 100)

      $(ui.sender).sortable('cancel');
});

然后，被删除的元素返回到组中。