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

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 资源

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

步骤 2: 创建 HTML 结构

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

<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:800px;padding:10px;">
    <table style="width:100%">
        <tr>
            <td valign="top">
                <h3>可选课程</h3>
                <div class="item">语文<br>Teacher: Mr.Wang</div>
                <div class="item">数学<br>Teacher: Mr.Xu</div>
                <div class="item">英语<br>Teacher: Miss.Liu</div>
                <div class="item">物理<br>Teacher: Mr.Zhao</div>
                <div class="item">化学<br>Teacher: Mr.Chen</div>
                <div class="item">体育<br>Teacher: Mr.Li</div>
            </td>
            <td valign="top" style="padding-left:50px;">
                <h3>课程表</h3>
                <table class="timetable">
                    <tr>
                        <th></th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                    </tr>
                    <tr>
                        <td>第1节</td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                    </tr>
                    <tr>
                        <td>第2节</td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                    </tr>
                    <tr>
                        <td>第3节</td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                    </tr>
                    <tr>
                        <td>第4节</td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                    </tr>
                    <tr>
                        <td>第5节</td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="drop"></td>
                        <td class="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 代理），课程表单元格可放置；从左侧拖入克隆添加，从表格内拖动则移动。

<script type="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 {
                    // 从左侧拖入：克隆添加
                    var clone = $(source).clone().addClass('assigned');
                    $(this).empty().append(clone);
                    clone.draggable({
                        revert: true  // 允许在表格内继续拖动调整
                    });
                }
            }
        });
    });
</script>

关键说明

• 从左侧拖入：使用 proxy:'clone'，放置时克隆课程并添加 assigned 类，标记已安排。
• 在表格内调整：已安排的课程（.assigned）拖动时直接移动元素。
• 视觉反馈：拖入单元格时高亮（.over 类）。
• revert: true：无效放置时回弹。
• 优势：直观排课，支持调整位置，可扩展清除/保存功能。

扩展建议

• 添加“清除”按钮：在单元格右键或双击清除课程。
• 支持保存：拖放后收集所有安排的课程，AJAX 提交到后端。
• 防止重复/冲突：onDrop 时检查单元格是否已有课程。
• 更多节次/星期：动态生成表格。

更多示例：

• 官方学校课程表示例：https://www.jeasyui.com/tutorial/dd/dnd3.php
• Demo 下载：可在官方教程页查找 ZIP。

如果需要添加保存功能、冲突检测、完整源码，或更多课程数据，请提供更多细节！