hi.. it is very good sample for generating school time table
Displaying school subjects <div class="left">
<table>
<tr>
<td><div class="item">English</div></td>
</tr>
<tr>
<td><div class="item">Science</div></td>
</tr>
<!-- other subjects -->
</table>
</div>
Displaying timetable <div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<!-- other cells -->
</table>
</div>
Drag the school subject on the left $('.left .item').draggable({
revert:true,
proxy:'clone'
});
Drop the school subject on timetable cell $('.right td.drop').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
As you can see the code above, when users drag the school subject on the left and drop it to the timetable cell, the onDrop callback function will be called. We clone the source element dragged from left and append it on timetable cell. When dragging school subject from timetable cell to another cell, simply move it.
SAMIR
Sr. Software Engineer
Raajkumar, if this helps please login to Mark As Answer. | Alert Moderator