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 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.

Problem:

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.

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

hi, try this..

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

if(/percent/ >= 100)

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

});

then, the dropped element return to groups