jQuery UI draggable/sortable/droppable disable drop when droppable limit is reached

Question

JS Bin demo

Task:

I\'m creating an event scheduler using jQuery UI. Events are of a certain length (in minutes) and they can be dragged into dif

Answer 1

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

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.

Hope that helps!

Answer 2

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

   if(/*percent*/ >= 100)

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

then, the dropped element returns to the group.