Drag and drop with jquery not working

Question

I have one calendar on which i have events at particular time on that calendar.

In the design of that calendar i used table. Each td states a particular time for the particular resource.

Now i want to add drag and drop facility to this calendar so that users can reschedule their events by drag and drop.

JS Files are :

 - jQuery UI 1.8.11
 - jQuery JavaScript Library v1.4.1

I am using this code for drag and drop :

$(".event1").draggable();
$(".timetd").droppable({
        accept: '.event1',
        hoverClass: 'droppable-hover',
        drop: function(event, ui) {
           alert('yes');
        }
    });

But this is not working means nothing is happened when i drag div.

Can anyone please help me ?

My code is like this fiddle :

http://jsfiddle.net/mausami/xp786/

Answer 1

Update Answer

Check here , DEMO http://jsfiddle.net/yeyene/xp786/4/

*Try to drop on 08:30 time slot.

And you cannot drop because there is no .timetd class to drop yet.

$(function() {
    $( ".event1" ).draggable();
    $( ".timetd b" ).droppable({
      accept: '.event1',
        drop: function (event, ui) {
            alert('yes');
        }
    });
});