jQuery EasyUI 拖放教程：创建学校课程表

在 Web 应用中实现拖拽排课功能，可借助 jQuery EasyUI 提供的 draggable 与 droppable 组件快速完成。本文将通过左侧科目列表与右侧时间表的布局，结合拖放事件回调，展示如何构建可交互的课程表界面，并说明元素克隆与状态切换的核心逻辑。

构建左侧科目与右侧时间表布局

课程表界面分为左右两部分：左侧展示可拖拽的学校科目，右侧为按星期与时间段划分的时间表网格。科目使用

元素包裹，时间表的可放置单元格使用 标识。

左侧科目列表结构

    

        

            
English
        
        

            
Science
        
        
    

右侧时间表网格结构

    

        

            

            
Monday
            
Tuesday
            
Wednesday
            
Thursday
            
Friday
        
        

            
08:00
            

            

            

            

            

        
        
    

配置科目拖拽行为

使用 draggable 方法为左侧科目元素启用拖拽功能。设置 revert: true 使拖拽结束后元素自动回到原位，proxy: 'clone' 表示拖拽过程中显示克隆的代理元素，避免影响原始布局。

$('.left .item').draggable({
    revert: true,
    proxy: 'clone'
});

实现时间表单元格放置逻辑

时间表中的 td.drop 单元格通过 droppable 方法接收拖放事件。通过 onDragEnter 与 onDragLeave 添加视觉反馈，onDrop 处理实际的放置逻辑。

$('.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 回调被触发。若源元素尚未分配（无 assigned 类），系统会克隆该元素、添加 assigned 标记并插入目标单元格，同时为新元素重新绑定 draggable 以支持后续调整。若源元素已分配，则直接将其移动至新单元格，实现课程位置的灵活调整。

该方案通过状态类区分原始科目与已排课元素，结合克隆与事件重绑机制，确保拖放操作既保留原始列表完整性，又支持课程表的动态编辑。