android 课程表 拖拽,jquery easyui课程表拖放效果代码

利用jquery EasyUI实现学校课程表的拖放设计，效果图：

如何将左边的课程拖到右边的单元格上，利用draggable,droppable二个插件就可以做到。

1，课程表的HTML结构：

复制代码 代码示例:

English

Science

2，时间表的HTML结构：

复制代码 代码示例:

	Monday	Tuesday	Wednesday	Thursday	Friday
08:00

3，jquery easyui拖放代码：

复制代码 代码示例:

$('.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

});

}

}

});

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:dnd3