当达到可放置限制时,jQuery UI draggable / sortable / droppable禁用drop

时间:2010-08-22 01:22:39

标签: jquery jquery-ui draggable droppable

JS Bin demo

任务:

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

问题:

如果“event”将导致“day”超过其最大时间长度(基于已经丢弃的元素的组合时间),则应禁用该“day”(此特定事件不允许丢弃)

demo可以看出,我可以计算出每天事件的合并时间(“可用分钟数”在阻止停止时更新),但我不知道如何禁用掉入如果被拖动的事件会导致“可用时间”变为负数。

2 个答案:

答案 0 :(得分:2)

这里最简单的方法是在开始时运行一个功能来检查是否有任何房间将被完全预订。我修改了您在此处提供的演示:revised demo

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

希望有所帮助!

答案 1 :(得分:2)

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

   if(/*percent*/ >= 100)

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

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