当前位置: 编程技术>jquery
jquery easyui课程表拖放效果代码
来源: 互联网 发布时间：2014-10-07
本文导语: 利用jQuery EasyUI实现学校课程表的拖放设计，效果图： 如何将左边的课程拖到右边的单元格上，利用draggable,droppable二个插件就可以做到。 1，课程表的HTML结构： 代码示例: English...
利用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
});
}
}
});
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
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。