当前位置：首页 > news >正文

jQuery EasyUI 拖放 - 创建学校课程表

news 2026/6/1 9:35:01

jQuery EasyUI 拖放 - 创建学校课程表

使用jQuery EasyUI的draggable和droppable插件，可以轻松实现一个交互式的学校课程表（Timetable）。左侧显示可选课程科目，用户可以将科目拖动到右侧的课程表单元格中安排课表。支持从左侧拖入（克隆添加）和在课程表内拖动调整位置。

这个示例模拟一个简单的排课系统：左侧是课程列表，右侧是按星期和节次划分的表格。

官方教程参考：https://www.jeasyui.com/tutorial/dd/dnd3.php
在线 Demo：https://www.jeasyui.com/tutorial/dd/dnd3_demo.html

步骤 1: 引入 EasyUI 资源

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 HTML 结构

左侧课程区（多个可拖动 div），右侧课程表（table 的 td 为放置区）。

<divstyle="margin:20px 0;"></div><divclass="easyui-panel"style="width:800px;padding:10px;"><tablestyle="width:100%"><tr><tdvalign="top"><h3>可选课程</h3><divclass="item">语文<br>Teacher: Mr.Wang</div><divclass="item">数学<br>Teacher: Mr.Xu</div><divclass="item">英语<br>Teacher: Miss.Liu</div><divclass="item">物理<br>Teacher: Mr.Zhao</div><divclass="item">化学<br>Teacher: Mr.Chen</div><divclass="item">体育<br>Teacher: Mr.Li</div></td><tdvalign="top"style="padding-left:50px;"><h3>课程表</h3><tableclass="timetable"><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>第1节</td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td></tr><tr><td>第2节</td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td></tr><tr><td>第3节</td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td></tr><tr><td>第4节</td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td></tr><tr><td>第5节</td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td><tdclass="drop"></td></tr></table></td></tr></table></div><style>.item{width:120px;height:60px;margin:10px;padding:10px;text-align:center;background:#fafafa;border:1px solid #ccc;cursor:move;}.timetable th, .timetable td{border:1px solid #ccc;padding:10px;text-align:center;width:100px;height:80px;vertical-align:top;}.timetable .drop{background:#fff;}.timetable .over{background:#ff0;}</style>

步骤 3: JavaScript 实现拖放逻辑

使课程可拖动（clone 代理），课程表单元格可放置；从左侧拖入克隆添加，从表格内拖动则移动。

<scripttype="text/javascript">$(function(){// 左侧课程可拖动（克隆）$('.item').draggable({revert:true,proxy:'clone',onStartDrag:function(){$(this).draggable('options').cursor='not-allowed';},onStopDrag:function(){$(this).draggable('options').cursor='move';}});// 课程表单元格可放置$('.timetable td.drop').droppable({onDragEnter:function(e,source){$(this).addClass('over');},onDragLeave:function(e,source){$(this).removeClass('over');},onDrop:function(e,source){$(this).removeClass('over');if($(source).hasClass('assigned')){// 从表格内拖动：移动$(this).append(source);}else{// 从左侧拖入：克隆添加varclone=$(source).clone().addClass('assigned');$(this).empty().append(clone);clone.draggable({revert:true// 允许在表格内继续拖动调整});}}});});</script>