This tutorial will show you how to create a school curriculum using jQuery EasyUI. We will create two tables: school subjects displayed on the left and on the right schedule. You can drag and drop it onto school subject schedule cell. School subjects is a
Display school subjects
|
English
|
|
Science
|
Show schedule
| Monday | Tuesday | Wednesday | Thursday | Friday | |
| 08:00 |
Drag the left side of school subjects
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
School subjects placed in a cell on the timetable
$('.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 in the above code, when a user drags on the left side of school subjects and placed in a cell in the schedule, onDrop callback function will be called. Source element was cloned from the left and dragging it to the schedule attached to the cell. When school subjects drag a cell from other cells to schedule, simply move it to.
Download jQuery EasyUI examples
jeasyui-dd-timetable.zip (edit: Leilin Peng Source: network intrusion deleted)