php 学校课程表,Easyui 创建学校课程表_EasyUI 教程

示例

本教程将向您展示如何使用 jQuery EasyUI 创建一个学校课程表。 我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个

元素，时间表单元格是一个 元素。

显示学校科目

English

Science

显示时间表

	Monday	Tuesday	Wednesday	Thursday	Friday
08:00

拖动在左侧的学校科目 $('.left .item').draggable({

revert:true,

proxy:'clone'

});

放置学校科目在时间表单元格上 $('.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

});

}

}

});

正如您所看到的上面的代码，当用户拖动在左侧的学校科目并放置到时间表单元格中时，onDrop 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。 当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。