how to do make a drop function with jquery

Question

I am having some problems with a jquery drag and drop div. At this moment I have the following jquery code:

<script>
                $(document).ready(function() { 
                    $('#coursesList').click(function() {
                        $('#dragCourseFromArea').hide(); 
                        $('#dragCourse').fadeIn(1100);              
                            var selectedValue = $(this).val();
                            $('#dragCourse').text(selectedValue);


                    }); 

                    $('#dragCourse').draggable({ revert: true });
                    $('#calendarDay').droppable({ 
                tolerance: 'touch',
                            accept: '#dragCourse',
                            activeClass: 'ui-state-hover',
                              hoverClass: 'ui-state-active',
                              drop: function( event, ui ) {
                                $( this )
                                  .addClass( 'ui-state-highlight' )
                                  .find('td')
                                    .html( 'Dropped!' );
                        }
                    });
                });             
                </script>

I am not sure if this is where the problem is. The 3 concerning elements is these:

<div id='dragCourseFromArea'>Drag new courses from this box to allocate</div>
<div id='dragCourse' class='ui-widget-content'></div>

<td id='calendarDay' style='background-color: #E4E4EE;' onMouseOver='this.style.backgroundColor=\"#cccccc\"' onMouseOut='this.style.backgroundColor=\"#E4E4EE\"' class='ui-widget-header'> {$monthday}</td>

I am not completely sure if I have done this right, but the "dragcourse" div is the one that should be dragged and dropped on the "calendarDay" which is a table cell (td). But no matter what I change, I can't seem to get this to work. Any suggestions on what could be wrong here?

Thanks in advance

Answer 1

Main problem is you can't repeat ID's in page, by definition an ID is unique. I updated your demo with a hack that adds class calandarDay to each of the same ID.

Then apply droppable to the class and it works up to the point of changing the html to Dropped!.

Note that the "this" within the drop callback is the <td> so I commented out find('td')

DEMO