problem using jQuery drag and drop

problem using jQuery drag and drop

am trying to create a timetable where only courses can be dropped to the timetable. This is jQuery code
 var counts = [0];
    var resizeOpts = { 
      handles: "all" ,autoHide:true
    };    
   $(".pick").draggable({
                         helper: "clone",
                         //Create counter
                         start: function() { counts[0]++; }
                        });


$(".tb table").droppable({
       drop: function(e, ui){
        //alert("hi");
               if(ui.draggable.hasClass("pick")) {
     $(this).append($(ui.helper).clone());
   //Pointing to the dragImg class in dropHere and add new class.
         $(".tb table .pick").addClass("item-"+counts[0]);
            $(".tb table .img").addClass("imgSize-"+counts[0]);
                
   //Remove the current class (ui-draggable and dragImg)
         $(".tb table .item-"+counts[0]).removeClass("pick ui-draggable ui-draggable-dragging");

$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});     
make_draggable($(".item-"+counts[0])); 
      $(".imgSize-"+counts[0]).resizable(resizeOpts);     
       }

       }
      });


var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}    
});

Bt wen i drag a course to the timetable it doesn't drop to the timetable, it get drop on top of my browser. then when i start to drag from that place before it get dragged to the timetable. i do not know what the problem is