jQuery drag&drop timeline tolerance

Question

I'm building a small but simple timeline scheduler, where external events (divs) could be dragged in. In the timeline one day exists out of 8 hours.

When draggin i have the option snap set to the snap element (.drop tr) and the snapMode to inner. In the over method from droppable when the dragged element is over the drop element the bg color is being changed.

But i've some problems

1. When i drag the element down over the droppable (over) the event bg is changed, but when drag the element up the out method is still being called, how is this possible?
2. When dragging the event horizontal i want a interval from 15 minutes. So i was thinking width cell (20px) = 1 hour / 4 = 5px (15 min). I have tried this with draggable grid but its not working correctly.

For code i've added a jsfiddle, dont look at the style its a concept :).

Jquery part

$(function()
{
    $('.evt').draggable({
        revert  : 'invalid',
        grid    : [20 / 4, 40],
        snap    : '.drop tr',
        snapMode: "inner"
    });

    $('.day tr').droppable({
        accept   : '.evt',
        tolerance: "fit",
        over     : function(event, ui)
        {
            $(ui.draggable).css('background', 'lightgreen');
            console.log('over');
        },
        out      : function(event, ui)
        {
            $(ui.draggable).css('background', 'red');
            console.log('out');
        }
    });
});

https://jsfiddle.net/dvr4zysc/

I hope someone could help me