drop event doesn't fire

Question

I'm working on a calendar. I have multiple droppables besides each other (upside down). On top of those droppables I have two draggable elements which are also resizable. Each droppable is 25px in height and 200px in width. The first draggable is 60px in height (element 1) and the other (element 2) is 20px in height. My problem is when I drag element 2 over element 1 and drop it between two droppables, the drop event doesn't fire. In all other drag and drop situations it works perfectly, the drop event fires.

HTML (snippet off because there are a lot of these droppables):

<div style="height:25px; width:200px; border-bottom:1px solid black;" class="droppable">
      <div class="time">Kl 8:00 </div>
</div>   
<div style="height:25px; width:200px; border-bottom:1px solid black;" class="droppable">
      <div class="time">Kl 8:15 </div>
</div>

jQuery (Here I'm creating my appointments (draggables)):

  appointment1 = $("<div style='height: 60px; width: 150px;  position: absolute; left: 508px; top: 214px;' id='drag2' class='draggable'><div><span class='gage1'>Drag</span></div></div>");
     appointment1.appendTo("#gage1");
     appointment2 = $(" <div class='draggable' id='drag1' style='height:20px; width:150px; position: absolute; left: 508x; top: 270px;'><div><span class='gage2'>Drag</span></div></div>");
     appointment2.appendTo("#gage2");

And here I have my drop event:

    $(".droppable").droppable({

        drop: function (event, ui) {
            alert("drop");

        }
    });

Answer 1

try to see if other methods do fire, like the over() method.