jQuery EasyUI 拖放 - 创建学校课程表
2023-09-14 09:14:10 时间
本教程将向您展示如何使用 jQuery EasyUI 创建一个学校课程表。 我们将创建两个表格:在左侧显示学校科目,在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个 <div class="item"> 元素,时间表单元格是一个 <td class="drop"> 元素。
显示学校科目
<div class="left"> <table> <tr> <td><div class="item">English</div></td> </tr> <tr> <td><div class="item">Science</div></td> </tr> <!-- other subjects --> </table> </div>
显示时间表
<div class="right"> <table> <tr> <td class="blank"></td> <td class="title">Monday</td> <td class="title">Tuesday</td> <td class="title">Wednesday</td> <td class="title">Thursday</td> <td class="title">Friday</td> </tr> <tr> <td class="time">08:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <!-- other cells --> </table> </div>
拖动在左侧的学校科目
$('.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失去焦点事件没触发
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- App-Folders:一个模拟 iOS 文件夹效果的 jQuery 插件
- WordPress 技巧:让 WordPress 真正支持 jQuery Lazyload
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery easyui刷新当前tabs详解编程语言
- jQuery基本选择器使用,新手入门必备详解编程语言
- jQuery each()方法的用法
- jquery复选框CHECKBOX全选、反选
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jquery中load方法的用法及注意事项说明
- jquery实现弹出层完美居中效果
- 调用jQuery滑出效果时闪烁的解决方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery实现在页面加载完毕后获取图片高度或宽度
- JQuery在线引用及测试引用是否成功