雷林鹏分享：jQuery EasyUI 拖放 - 创建学校课程表

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

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

　　显示学校科目

　　

　　

　　

　　

扫描二维码关注公众号，回复： 7031783 查看本文章

　　

　　

　　

　　

　　

　　

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 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。 当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。

　　下载 jQuery EasyUI 实例

　　jeasyui-dd-timetable.zip(编辑：雷林鹏 来源：网络 侵删)