以下是以资深软件开发工程师的视角，对“jQuery EasyUI 拖放 – 创建学校课程表”的专业回答。我将详细讲解如何使用 jQuery EasyUI 的拖放（Drag and Drop）功能创建学校课程表，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。

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

目录

  1. 引言
  2. 学校课程表概述
  1. 实现基础学校课程表
  1. 高级学校课程表配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 提供了强大的拖放（Drag and Drop）功能，通过结合 draggable 和 droppable 组件，可以轻松实现交互式的学校课程表。本教程将从基础到高级，带你掌握如何创建拖放式课程表，并提供实用示例。

2. 学校课程表概述

2.1 什么是拖放学校课程表？

  • 定义：拖放学校课程表是一个交互式界面，允许用户通过拖动课程（如科目）并放置到时间表单元格中来安排课程。
  • 实现方式：使用 jQuery EasyUI 的 draggable（可拖动）组件定义课程项，droppable（可放置）组件定义时间表单元格，通过事件回调管理拖放行为。

2.2 学校课程表的应用场景

  • 课程安排：教师或管理员手动调整课程时间。
  • 可视化管理：直观展示一周的课程计划。
  • 参考：jQuery EasyUI 官方文档 Drag and Drop 部分（jeasyui.com）。

3. 实现基础学校课程表

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 创建基础拖放课程表

  • 方法：
  • 创建左侧课程列表（draggable 元素）和右侧时间表（droppable 单元格）。
  • 使用 draggable 使课程可拖动，droppable 处理放置逻辑。
  • 示例：
<div style="float:left; width:150px;">
  <div class="item">语文</div>
  <div class="item">数学</div>
</div>
<table style="float:left;">
  <tr><td class="drop"></td><td class="drop"></td></tr>
</table>
<script>
$('.item').draggable({ revert: true, proxy: 'clone' });
$('.drop').droppable({
  onDrop: function(e, source) {
    var cloned = $(source).clone().addClass('assigned');
    $(this).empty().append(cloned);
    cloned.draggable({ revert: true });
  }
});
</script>

3.3 实例：基础学校课程表

以下是一个基础拖放学校课程表的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础学校课程表</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    .item { margin: 5px; padding: 10px; background: #e0f0ff; cursor: move; }
    table { border-collapse: collapse; }
    .drop { width: 100px; height: 50px; border: 1px solid #ccc; text-align: center; }
  </style>
</head>
<body>
  <h2>基础学校课程表</h2>
  <div style="float:left; width:150px;">
    <div class="item">语文</div>
    <div class="item">数学</div>
    <div class="item">英语</div>
  </div>
  <div style="float:left; margin-left:20px;">
    <table>
      <tr>
        <th>周一</th><th>周二</th><th>周三</th>
      </tr>
      <tr>
        <td class="drop"></td><td class="drop"></td><td class="drop"></td>
      </tr>
      <tr>
        <td class="drop"></td><td class="drop"></td><td class="drop"></td>
      </tr>
    </table>
  </div>
  <script>
    $('.item').draggable({
      revert: true,
      proxy: 'clone'
    });
    $('.drop').droppable({
      onDrop: function(e, source) {
        var cloned = $(source).clone().addClass('assigned');
        $(this).empty().append(cloned);
        cloned.draggable({ revert: true });
      }
    });
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 左侧显示“语文”、“数学”、“英语”三个可拖动课程项。
  • 右侧为 2×3 的时间表，拖动课程到单元格会克隆并放置，已放置的课程可再次拖动到其他单元格。

4. 高级学校课程表配置

4.1 自定义样式和行为

  • 样式：通过 CSS 美化课程项和单元格。
  • 行为：添加拖动时的视觉反馈（如高亮）。
  • 示例：
.drop.over { background: #d0e0f0; }

$('.drop').droppable({
  onDragEnter: function() { $(this).addClass('over'); },
  onDragLeave: function() { $(this).removeClass('over'); },
  onDrop: function() { $(this).removeClass('over'); }
});

4.2 动态交互和数据管理

  • 动态交互：支持课程移除或从单元格间移动。
  • 数据管理：记录课程表状态，动态更新。
  • 示例：
onDrop: function(e, source) {
  if ($(source).hasClass('assigned')) {
    $(this).append(source);
  } else {
    var cloned = $(source).clone().addClass('assigned');
    $(this).empty().append(cloned);
    cloned.draggable({ revert: true });
  }
}

4.3 实例：带交互的高级学校课程表

以下是一个带交互的高级学校课程表示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 高级学校课程表</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    .item { margin: 5px; padding: 10px; background: #e0f0ff; cursor: move; text-align: center; }
    table { border-collapse: collapse; }
    .drop { width: 120px; height: 60px; border: 1px solid #ccc; text-align: center; }
    .drop.over { background: #d0e0f0; }
    .assigned { background: #c0e0ff; }
    #trash { width: 100px; height: 100px; background: #f0f0f0; margin-top: 10px; text-align: center; line-height: 100px; }
    #trash.over { background: #ffcccc; }
  </style>
</head>
<body>
  <h2>高级学校课程表</h2>
  <div style="float:left; width:150px;">
    <div class="item">语文</div>
    <div class="item">数学</div>
    <div class="item">英语</div>
    <div class="item">物理</div>
    <div id="trash" class="drop">拖到此处删除</div>
  </div>
  <div style="float:left; margin-left:20px;">
    <table>
      <tr>
        <th></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th>
      </tr>
      <tr>
        <td>08:00</td><td class="drop"></td><td class="drop"></td><td class="drop"></td><td class="drop"></td><td class="drop"></td>
      </tr>
      <tr>
        <td>09:00</td><td class="drop"></td><td class="drop"></td><td class="drop"></td><td class="drop"></td><td class="drop"></td>
      </tr>
    </table>
  </div>
  <script>
    $('.item').draggable({
      revert: true,
      proxy: 'clone'
    });

    $('.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 cloned = $(source).clone().addClass('assigned');
          $(this).empty().append(cloned);
          cloned.draggable({ revert: true });
        }
      }
    });

    $('#trash').droppable({
      accept: '.assigned',
      onDragEnter: function() { $(this).addClass('over'); },
      onDragLeave: function() { $(this).removeClass('over'); },
      onDrop: function(e, source) {
        $(this).removeClass('over');
        $(source).remove();
        $.messager.show({ title: '提示', msg: '课程已删除', timeout: 2000, showType: 'slide' });
      }
    });
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 左侧显示“语文”、“数学”、“英语”、“物理”四个课程项和一个删除区域。
  • 右侧为 2×5 的时间表（周一至周五，08:00 和 09:00），拖动课程到单元格克隆放置，拖到其他单元格移动，拖到“删除”区域移除。
  • 拖动时单元格高亮，删除时显示提示。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 视觉反馈：使用 onDragEnter 和 onDragLeave 添加高亮效果，提升用户体验。
  • 课程管理：区分原始课程（克隆）和已安排课程（移动），确保操作逻辑清晰。
  • 布局优化：时间表单元格大小应适中，避免过于密集。

5.2 性能优化与调试

  • 性能：避免过多克隆操作影响性能，必要时限制单元格内容数量。
  • 调试：检查 draggable 和 droppable 事件是否正确触发，确认克隆和移除逻辑无误。

6. 结论

jQuery EasyUI 的拖放功能通过 draggable 和 droppable 组件，为创建交互式学校课程表提供了强大支持。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要菜单支持，可参考 jQuery EasyUI 简单菜单 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础拖放到高级交互，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础学校课程表。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。