设为首页收藏本站
开启辅助访问 切换到宽版

无忧启动论坛

 找回密码
 注册
搜索
无忧启动论坛»论坛 › ::启动制作:: › 综合讨论区 › [刚更新了一次] 为了证明我 不是大大说的玻璃心 再发一 ...
系统gho:最纯净好用系统下载站投放广告、加入VIP会员，请联系 微信:wuyouceo
返回列表 发新帖
查看: 1712|回复: 23
打印 上一主题 下一主题

[刚更新了一次] 为了证明我 不是大大说的玻璃心 再发一个 呵呵!

[复制链接]
跳转到指定楼层
1#
发表于 2025-8-8 14:01:03 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
加入VIP会员，获无忧币，赠积分，送勋章，下载无限制，获论坛最高级会员权限 !
本帖最后由 879792799 于 2025-8-18 11:48 编辑

更新了一下  在2楼  比较随意 以后慢慢改  

本文代码大部分参考https://zhuanlan.zhihu.com/p/698006468?_refluxos=a10 -----有点问题就是手机上无法用我已修改
也参考这篇https://juejin.cn/post/7351691676917170187   





第11行 zoom:50%; 自己调整缩放大小!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>拖拽实现排课</title>
  8.     <style>
  9.         body {
  10.                
  11.             zoom:50%;
  12.             margin: 0;
  13.             padding: 0;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.             height: 100vh;
  18.             background-color: #f0f0f0;
  19.         }
  20.                
  21.         .box {
  22.             width: 1000px;
  23.             height: 600px;
  24.             display: flex;
  25.             padding: 5px;
  26.             box-sizing: border-box;
  27.         }
  28.                
  29.         .left {
  30.                     margin: 0;
  31.             padding: 0;
  32.             width: 620px;
  33.             display: flex;
  34.                         box-sizing: border-box;
  35.                         font-size: 29px;
  36.                         
  37.         }
  38.                
  39.       
  40.                
  41.         .yu { background: #999999;
  42.     width: 180px; height: 70px; line-height: 70px;
  43.     padding: 2px;
  44.     text-align: center;
  45.     overflow: hidden;
  46.     text-overflow: ellipsis;
  47.     white-space: nowrap;
  48.      margin: 10px;
  49. }

  51.         .yi { background: #FC6B66;
  52.     width: 180px; height: 70px; line-height: 70px;
  53.     padding: 2px;
  54.     text-align: center;
  55.     overflow: hidden;
  56.     text-overflow: ellipsis;
  57.     white-space: nowrap;
  58.      margin: 10px;
  59. }


  62.   .wuu { background: #09496C;
  63.     width: 180px; height: 70px; line-height: 70px;
  64.     padding: 2px;
  65.     text-align: center;
  66.     overflow: hidden;
  67.     text-overflow: ellipsis;
  68.     white-space: nowrap;
  69.      margin: 10px;
  70. }

  72.         .shu { background: skyblue; width: 180px; height: 70px; line-height: 70px;
  73.     padding: 2px;
  74.     text-align: center;
  75.     overflow: hidden;
  76.     text-overflow: ellipsis;
  77.     white-space: nowrap;
  78.       margin: 10px;
  79.     }
  80.         .ying { background: mediumslateblue;width: 180px; height: 70px;line-height: 70px;
  81.     padding: 2px;
  82.     text-align: center;
  83.     overflow: hidden;
  84.     text-overflow: ellipsis;
  85.     white-space: nowrap;  margin: 10px;
  86.     }
  87.         .wu { background: aqua; width: 180px; height: 70px; line-height: 70px;
  88.     padding: 2px;
  89.     text-align: center;
  90.     overflow: hidden;
  91.     text-overflow: ellipsis;
  92.     white-space: nowrap;  margin: 10px;
  93.     }
  94.         .hua { background: violet; width: 180px; height: 70px; line-height: 70px;
  95.     padding: 2px;
  96.     text-align: center;
  97.     overflow: hidden;
  98.     text-overflow: ellipsis;
  99.     white-space: nowrap; margin: 10px;
  100.     }
  101.         .sheng { background: navajowhite; width: 180px; height: 70px; line-height: 70px;
  102.     padding: 2px;
  103.     text-align: center;
  104.     overflow: hidden;
  105.     text-overflow: ellipsis;
  106.     white-space: nowrap; margin: 10px;
  107.     }

  109.      
  110.         
  111.         .right { background: rgb(238, 238, 238); padding: 0px; height: fit-content; font-size: 25px;}

  113. .info { display: flex; justify-content: center; }


  116. table { font-family: monospace; table-layout: fixed;  margin-bottom: 20px; }
  117. table.colorless .item { background: unset; color: unset; }



  121. td, th { border: 1px solid rgb(153, 153, 153); height: 60px; line-height: 60px; padding: 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  123. th { font-weight: normal; background: rgb(204, 204, 204); }

  125. td[data-drop="copy"] { width: 80px; }

  127. thead th.editable { width: 176px; height: 60px; }

  129. thead th.controlable.editable { width: 80px; height: 60px; }

  131. tbody th.controlable.editable { width: 44px; height: auto; }

  133. tbody td.controlable.editable { width: 124px; height: 60px; }

  135. tbody td.editable { width: auto; height: 60px; }

  137. body td { width: 80px; height: 60px; position: relative; }
  138.     </style>
  139. </head>
  140. <body>

  142.     <div class="box">
  143.         

  145.         <div class="right">
  146. <div class="content" id="content">
  147.   <div class="left">
  148.         <div class="yu" draggable="true">语文</div>
  149.         <div class="shu" draggable="true">数学</div>
  150.         <div class="ying" draggable="true">英语</div>
  151.         <div class="wu" draggable="true">物理</div>
  152.         
  153.   </div>
  154.   <div class="left">
  155.   <div class="hua" draggable="true">化学</div>
  156.   <div class="sheng" draggable="true">地理</div>
  157.   <div class="yi" draggable="true">音乐</div>
  158.   <div class="wuu" draggable="true">武术</div>
  159.   </div>

  161.   <div class="info"><h1 class="editable">离线本地存储-可拖拽小学课表</h1>  </div>

  163.   <table>
  164.     <colgroup>
  165.       <col>
  166.       <col>
  167.       <col>
  168.       <col>
  169.       <col>
  170.       <col>
  171.       <col>
  172.       <col>
  173.     </colgroup>
  174.     <thead>
  175.       <tr>
  176.         <th class="editable" colspan="2">时间</th>
  177.         <th class="controlable editable">星期一</th>
  178.         <th class="controlable editable">星期二</th>
  179.         <th class="controlable editable">星期三</th>
  180.         <th class="controlable editable">星期四</th>
  181.         <th class="controlable editable">星期五</th>
  182.       
  183.       </tr>
  184.     </thead>
  185.     <tbody>
  186.       <tr>
  187.         <th class="controlable editable" rowspan="6">上午</th>
  188.         <td class="controlable editable">08:00-08:30</td>
  189.         <td class="editable" colspan="5" data-controlable="split">早读</td>
  190.       </tr>
  191.       <tr>
  192.         <td class="controlable editable">08:35-9:20</td>
  193.         <td data-drop="copy" data-controlable="merge"></td>
  194.         <td data-drop="copy"></td>
  195.         <td data-drop="copy"></td>
  196.         <td data-drop="copy"></td>
  197.         <td data-drop="copy"></td>
  198.       
  199.       </tr>
  200.       <tr>
  201.         <td class="controlable editable">9:30-10:15</td>
  202.         <td data-drop="copy" data-controlable="merge"></td>
  203.         <td data-drop="copy"></td>
  204.         <td data-drop="copy"></td>
  205.         <td data-drop="copy"></td>
  206.         <td data-drop="copy"></td>
  207.   
  208.       </tr>
  209.       <tr>
  210.         <td class="controlable editable">10:15-10:40</td>
  211.         <td class="editable" colspan="5" data-controlable="split">课间操</td>
  212.       </tr>
  213.       <tr>
  214.         <td class="controlable editable">10:40-11:25</td>
  215.         <td data-drop="copy" data-controlable="merge"></td>
  216.         <td data-drop="copy"></td>
  217.         <td data-drop="copy"></td>
  218.         <td data-drop="copy"></td>
  219.         <td data-drop="copy"></td>
  220.       
  221.       </tr>
  222.       <tr>
  223.         <td class="controlable editable">11:35-12:20</td>
  224.         <td data-drop="copy" data-controlable="merge"></td>
  225.         <td data-drop="copy"></td>
  226.         <td data-drop="copy" class=""></td>
  227.         <td data-drop="copy" class=""></td>
  228.         <td data-drop="copy" class=""></td>
  229.       
  230.       </tr>
  231.       <tr>
  232.         <th class="controlable editable" rowspan="1">中午</th>
  233.         <td class="controlable editable">12:20-15:30</td>
  234.         <td class="editable" colspan="5" data-controlable="split">午休</td>
  235.       </tr>
  236.       <tr>
  237.         <th class="controlable editable" rowspan="5">下午</th>
  238.         <td class="controlable editable">15:35-16:20</td>
  239.         <td data-drop="copy" data-controlable="merge" class=""></td>
  240.         <td data-drop="copy" class=""></td>
  241.         <td data-drop="copy" class=""></td>
  242.         <td data-drop="copy" class=""></td>
  243.         <td data-drop="copy" class=""></td>
  244.    
  245.       </tr>
  246.       <tr>
  247.         <td class="controlable editable">16:30-17:15</td>
  248.         <td data-drop="copy" data-controlable="merge"></td>
  249.         <td data-drop="copy" class=""></td>
  250.         <td data-drop="copy" class=""></td>
  251.         <td data-drop="copy" class=""></td>
  252.         <td data-drop="copy" class=""></td>
  253.       
  254.       </tr>
  255.       <tr>
  256.         <td class="controlable editable">17:15-17:30</td>
  257.         <td class="editable" colspan="5" data-controlable="split">眼保健操</td>
  258.       </tr>
  259.       <tr>
  260.         <td class="controlable editable">17:30-18:15</td>
  261.         <td data-drop="copy" data-controlable="merge"></td>
  262.         <td data-drop="copy"></td>
  263.         <td data-drop="copy"></td>
  264.         <td data-drop="copy"></td>
  265.         <td data-drop="copy"></td>

  267.       </tr>
  268.       <tr>
  269.         <td class="controlable editable">18:25-19:10</td>
  270.         <td data-drop="copy" data-controlable="merge"></td>
  271.         <td data-drop="copy"></td>
  272.         <td data-drop="copy"></td>
  273.         <td data-drop="copy"></td>
  274.         <td data-drop="copy"></td>

  276.       </tr>
  277.       
  278.     </tbody>
  279.   </table>

  281.                
  282.         
  283.     </div>
  284.                 </div>
  285.           </div>
  286.     <script>
  287.    
  288.           document.addEventListener('DOMContentLoaded', function () {

  290.   //定义数组
  291. //  if (this.localStorage.getItem('contentHTML')) {
  292.    
  293. //alert('数据已从 localStorage 加载成功');
  294.   //}

  296. loadpoition() ;
  297.          

  299.        // 获取所有可拖动的课程项
  300.         const draggables = document.querySelectorAll('.left > div');
  301.         // 获取所有可放置课程的时间段单元格（不包括第一列）
  302.         const droppables = document.querySelectorAll('.right td:not(:first-child)');

  304.         // 添加拖拽开始事件监听器
  305.         draggables.forEach(draggable => {
  306.             draggable.addEventListener('dragstart', e => {
  307.                 e.dataTransfer.setData('text/plain', e.target.className);
  308.                 e.dataTransfer.dropEffect = 'move';
  309.             });
  310.         });

  312.         // 添加拖拽进入和放置事件监听器
  313.         droppables.forEach(droppable => {
  314.             droppable.addEventListener('dragover', e => {
  315.                 e.preventDefault();
  316.                 e.dataTransfer.dropEffect = 'move';
  317.             });

  319.             droppable.addEventListener('drop', e => {
  320.                 e.preventDefault();
  321.                 const draggedItemClass = e.dataTransfer.getData('text/plain');
  322.                 const draggedItem = document.querySelector(`.${draggedItemClass}`);

  324.                 if (e.target.tagName === 'TD') {
  325.                     e.target.textContent = draggedItem.textContent;
  326.                     e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
  327.                 }
  328.                
  329.                 archive()         
  330.             });
  331.         });





  337.           });
  338.          
  339. // 读档
  340. function loadpoition() {
  341.   const contentHTML = localStorage.getItem('contentHTML');

  343.   let contentLoaded = false;

  345.   if (contentHTML) {
  346.     const contentElement = document.querySelector('.right');
  347.     if (contentElement) {
  348.       contentElement.outerHTML = contentHTML;
  349.       contentLoaded = true; // 标记content元素已加载
  350.     } else {
  351.       console.warn('页面上未找到类名为 "content" 的元素。');
  352.     }
  353.   }

  355.   // 检查两个元素是否都已成功加载
  356.   if (contentLoaded) {
  357.   //  alert('数据已从 localStorage 加载成功');
  358.   
  359.   }
  360. }
  361.             // 存档
  362. function archive() {
  363.   const contentElement = document.querySelector('.right');

  365.   if (contentElement) {
  366.     const contentHTML = contentElement.outerHTML;
  367.     localStorage.setItem('contentHTML', contentHTML);
  368.   }
  369. // alert('数据已保存到 localStorage');
  370. }
  371.    
  372.    
  373.   
  374.         
  375.         
  376.     </script>
  377. </body>
  378. </html>
复制代码



点评

879792799
本人菜鸟不保证能用 抛砖引玉 希望大大改进!  发表于 2025-8-8 14:04
回复

使用道具 举报

xtwwz
22#
发表于 2 小时前 | 只看该作者
879792799 发表于 2025-8-18 11:47
重置按钮已添加在2楼

你说的难度有点大 要不你就用这个吧---只能电脑上用 符合你要求  ...

已经很好了，谢谢。
回复

使用道具 举报

21#
 楼主| 发表于 昨天 11:47 | 只看该作者
xtwwz 发表于 2025-8-18 00:31
课程可以扩展么，比如扩展到初中、高中里有的课程？如能给出一些修改建议，就更好了。

   
重置按钮已添加在2楼

你说的难度有点大 要不你就用这个吧---只能电脑上用 符合你要求
唯一办法只能修改 https://zhuanlan.zhihu.com/p/698006468?_refluxos=a10 -----有点问题就是手机上无法用
不过我试过一次没成功,有空我再试试

点评

xtwwz
已经很好了，谢谢。  详情 回复 发表于 2 小时前
回复

使用道具 举报

xtwwz
20#
发表于 昨天 00:31 | 只看该作者
课程可以扩展么，比如扩展到初中、高中里有的课程？如能给出一些修改建议，就更好了。

点评

879792799
重置按钮已添加在2楼 你说的难度有点大 要不你就用这个吧---只能电脑上用 符合你要求 唯一办法只能修改 https://zhuanlan.zhihu.com/p/698006468?_refluxos=a10 -----有点问题就是手机上无法用  详情 回复 发表于 昨天 11:47
回复

使用道具 举报

xtwwz
19#
发表于 前天 03:54 | 只看该作者
可加个按钮，一键复位，还原到拖动前的状态。

评分

参与人数 1无忧币 +5 收起 理由
879792799 + 5 ok 这个可以有 到时一起加上!

查看全部评分

回复

使用道具 举报

18#
 楼主| 发表于 3 天前 | 只看该作者
准备加个遮罩层来提示当天课程  更加直观!!请关注最近要更新一下!
回复

使用道具 举报

17#
发表于 2025-8-11 05:59:00 | 只看该作者
我是爱钻 牛角尖 的执着人！

评分

参与人数 1无忧币 +2 收起 理由
879792799 + 2 赞一个!

查看全部评分

回复

使用道具 举报

16#
发表于 2025-8-10 08:26:10 | 只看该作者
还 特意搜了下 楼主的帖子

感觉 是一个喜欢 钻研 很有想法的人   给你顶

评分

参与人数 1无忧币 +5 收起 理由
879792799 + 5 谢谢大大的眼光！

查看全部评分

回复

使用道具 举报

15#
发表于 2025-8-9 13:53:16 | 只看该作者
楼主的想法 可以呀 想法很奇特 有点意思  

点评

879792799
呵呵 兴趣使然！  发表于 2025-8-10 19:59
回复

使用道具 举报

14#
发表于 2025-8-9 08:43:48 | 只看该作者
感谢分享
回复

使用道具 举报

13#
发表于 2025-8-9 08:11:40 | 只看该作者
有课代表没有？
回复

使用道具 举报

12#
发表于 2025-8-9 07:41:54 | 只看该作者
谢谢楼主分享
回复

使用道具 举报

11#
发表于 2025-8-9 06:01:28 | 只看该作者
谢谢分享
回复

使用道具 举报

10#
发表于 2025-8-8 20:40:28 | 只看该作者
版主不是玻璃心 是爱钻牛角尖的执着好男儿！

评分

参与人数 1无忧币 +5 收起 理由
879792799 + 5 感谢 感谢！！

查看全部评分

回复

使用道具 举报

9#
发表于 2025-8-8 20:19:33 | 只看该作者
有点东西的
回复

使用道具 举报

8#
发表于 2025-8-8 17:56:02 | 只看该作者
感觉挺方便的
回复

使用道具 举报

7#
发表于 2025-8-8 15:17:00 | 只看该作者
谢谢分享
回复

使用道具 举报

6#
发表于 2025-8-8 15:10:51 | 只看该作者
这真是有点东西的
回复

使用道具 举报

5#
发表于 2025-8-8 14:49:07 | 只看该作者
感谢分享
回复

使用道具 举报

hmaaaa
4#
发表于 2025-8-8 14:25:34 | 只看该作者
感謝大大辛苦分享!感恩!^^
回复

使用道具 举报

3#
发表于 2025-8-8 14:24:30 | 只看该作者
做的不错 支持了
回复

使用道具 举报

2#
 楼主| 发表于 2025-8-8 14:02:26 | 只看该作者
本帖最后由 879792799 于 2025-8-18 11:41 编辑

修改一下比较凑活,   需要自己再改该


增加了  
1当前星期指示框   
2加了重置按钮

指示框位置不对 自行修改336行 等等  drawhq(220)   220可以调整左右X坐标
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>拖拽实现排课</title>
  8.     <style>
  9.         body {
  10.                
  11.             zoom:50%;
  12.             margin: 0;
  13.             padding: 0;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.             height: 100vh;
  18.             
  19.         }
  20.                
  21.         .box {
  22.             width: 1000px;
  23.             height: 600px;
  24.             display: flex;
  25.             padding: 5px;
  26.             box-sizing: border-box;
  27.         }
  28.             
  29.             
  30.    .table-container {
  31.         position: relative;
  32.         width: 600px; /* 容器宽度，根据需求调整 */
  33.         height: 1000px; /* 容器高度，根据需求调整 */
  34.     }
  35.        
  36.     .table, .svg {
  37.         position: absolute;
  38.         top: 0;
  39.         left: 0;
  40.     }
  41.        
  42.     .table {
  43.         z-index: 1; /* 表格1在下方 */
  44.     }
  45.        
  46. .svg {
  47.      z-index:2; /* 表格2在上方 */
  48.     }   
  49.             
  50.             
  51.                
  52.         .left {
  53.                     margin: 0;
  54.             padding: 0;
  55.             width: 620px;
  56.             display: flex;
  57.                         box-sizing: border-box;
  58.                         font-size: 29px;
  59.                         
  60.         }
  61.                
  62.       
  63.                
  64.         .yu { background: #999999;
  65.     width: 180px; height: 70px; line-height: 70px;
  66.     padding: 2px;
  67.     text-align: center;
  68.     overflow: hidden;
  69.     text-overflow: ellipsis;
  70.     white-space: nowrap;
  71.      margin: 10px;
  72. }

  74.         .yi { background: #FC6B66;
  75.     width: 180px; height: 70px; line-height: 70px;
  76.     padding: 2px;
  77.     text-align: center;
  78.     overflow: hidden;
  79.     text-overflow: ellipsis;
  80.     white-space: nowrap;
  81.      margin: 10px;
  82. }


  85.   .wuu { background: #09496C;
  86.     width: 180px; height: 70px; line-height: 70px;
  87.     padding: 2px;
  88.     text-align: center;
  89.     overflow: hidden;
  90.     text-overflow: ellipsis;
  91.     white-space: nowrap;
  92.      margin: 10px;
  93. }

  95.         .shu { background: skyblue; width: 180px; height: 70px; line-height: 70px;
  96.     padding: 2px;
  97.     text-align: center;
  98.     overflow: hidden;
  99.     text-overflow: ellipsis;
  100.     white-space: nowrap;
  101.       margin: 10px;
  102.     }
  103.         .ying { background: mediumslateblue;width: 180px; height: 70px;line-height: 70px;
  104.     padding: 2px;
  105.     text-align: center;
  106.     overflow: hidden;
  107.     text-overflow: ellipsis;
  108.     white-space: nowrap;  margin: 10px;
  109.     }
  110.         .wu { background: aqua; width: 180px; height: 70px; line-height: 70px;
  111.     padding: 2px;
  112.     text-align: center;
  113.     overflow: hidden;
  114.     text-overflow: ellipsis;
  115.     white-space: nowrap;  margin: 10px;
  116.     }
  117.         .hua { background: violet; width: 180px; height: 70px; line-height: 70px;
  118.     padding: 2px;
  119.     text-align: center;
  120.     overflow: hidden;
  121.     text-overflow: ellipsis;
  122.     white-space: nowrap; margin: 10px;
  123.     }
  124.         .sheng { background: navajowhite; width: 180px; height: 70px; line-height: 70px;
  125.     padding: 2px;
  126.     text-align: center;
  127.     overflow: hidden;
  128.     text-overflow: ellipsis;
  129.     white-space: nowrap; margin: 10px;
  130.     }

  132.      
  133.         
  134.         .right {  padding: 0px; height: fit-content; font-size: 25px;
  135.                 z-index: 1; /* 表格1在下方 */
  136.                 }

  138. .info { display: flex; justify-content: center; }



  142. table.colorless .item { color: unset;
  143. z-index: 1; /* 表格1在下方 */
  144. }



  148. td, th { border: 1px solid rgb(153, 153, 153); height: 60px; line-height: 60px; padding: 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  150. th { font-weight: normal;  }

  152. td[data-drop="copy"] { width: 80px; }

  154. thead th.editable { width: 176px; height: 60px; }

  156. thead th.controlable.editable { width: 80px; height: 60px; }

  158. tbody th.controlable.editable { width: 44px; height: auto; }

  160. tbody td.controlable.editable { width: 124px; height: 60px; }

  162. tbody td.editable { width: auto; height: 60px; }

  164. body td { width: 80px; height: 60px; position: relative; }
  165.     </style>
  166. </head>
  167. <body>

  169.     <div class="box">
  170.         

  172.         <div class="right">
  173. <div class="content" id="content">
  174.   <div class="left">
  175.         <div class="yu" draggable="true">语文</div>
  176.         <div class="shu" draggable="true">数学</div>
  177.         <div class="ying" draggable="true">英语</div>
  178.         <div class="wu" draggable="true">物理</div>
  179.         
  180.   </div>
  181.   <div class="left">
  182.   <div class="hua" draggable="true">化学</div>
  183.   <div class="sheng" draggable="true">地理</div>
  184.   <div class="yi" draggable="true">音乐</div>
  185.   <div class="wuu" draggable="true">武术</div>
  186.   <button class="button init" onclick="init()">重置</button>
  187.   </div>

  189.   <div class="info"><h1 class="editable">离线本地存储-可拖拽小学课表</h1>  </div>
  190. <div class="table-container">
  191.   <table     class="table">
  192.     <colgroup>
  193.       <col>
  194.       <col>
  195.       <col>
  196.       <col>
  197.       <col>
  198.       <col>
  199.       <col>
  200.       <col>
  201.     </colgroup>
  202.     <thead>
  203.       <tr>
  204.         <th class="editable" colspan="2">时间</th>
  205.         <th class="controlable editable">星期一</th>
  206.         <th class="controlable editable">星期二</th>
  207.         <th class="controlable editable">星期三</th>
  208.         <th class="controlable editable">星期四</th>
  209.         <th class="controlable editable">星期五</th>
  210.       
  211.       </tr>
  212.     </thead>
  213.     <tbody>
  214.       <tr>
  215.         <th class="controlable editable" rowspan="6">上午</th>
  216.         <td class="controlable editable">08:00-08:30</td>
  217.         <td class="editable" colspan="5" data-controlable="split">早读</td>
  218.       </tr>
  219.       <tr>
  220.         <td class="controlable editable">08:35-9:20</td>
  221.         <td data-drop="copy" data-controlable="merge"></td>
  222.         <td data-drop="copy"></td>
  223.         <td data-drop="copy"></td>
  224.         <td data-drop="copy"></td>
  225.         <td data-drop="copy"></td>
  226.       
  227.       </tr>
  228.       <tr>
  229.         <td class="controlable editable">9:30-10:15</td>
  230.         <td data-drop="copy" data-controlable="merge"></td>
  231.         <td data-drop="copy"></td>
  232.         <td data-drop="copy"></td>
  233.         <td data-drop="copy"></td>
  234.         <td data-drop="copy"></td>
  235.   
  236.       </tr>
  237.       <tr>
  238.         <td class="controlable editable">10:15-10:40</td>
  239.         <td class="editable" colspan="5" data-controlable="split">课间操</td>
  240.       </tr>
  241.       <tr>
  242.         <td class="controlable editable">10:40-11:25</td>
  243.         <td data-drop="copy" data-controlable="merge"></td>
  244.         <td data-drop="copy"></td>
  245.         <td data-drop="copy"></td>
  246.         <td data-drop="copy"></td>
  247.         <td data-drop="copy"></td>
  248.       
  249.       </tr>
  250.       <tr>
  251.         <td class="controlable editable">11:35-12:20</td>
  252.         <td data-drop="copy" data-controlable="merge"></td>
  253.         <td data-drop="copy"></td>
  254.         <td data-drop="copy" class=""></td>
  255.         <td data-drop="copy" class=""></td>
  256.         <td data-drop="copy" class=""></td>
  257.       
  258.       </tr>
  259.       <tr>
  260.         <th class="controlable editable" rowspan="1">中午</th>
  261.         <td class="controlable editable">12:20-15:30</td>
  262.         <td class="editable" colspan="5" data-controlable="split">午休</td>
  263.       </tr>
  264.       <tr>
  265.         <th class="controlable editable" rowspan="5">下午</th>
  266.         <td class="controlable editable">15:35-16:20</td>
  267.         <td data-drop="copy" data-controlable="merge" class=""></td>
  268.         <td data-drop="copy" class=""></td>
  269.         <td data-drop="copy" class=""></td>
  270.         <td data-drop="copy" class=""></td>
  271.         <td data-drop="copy" class=""></td>
  272.    
  273.       </tr>
  274.       <tr>
  275.         <td class="controlable editable">16:30-17:15</td>
  276.         <td data-drop="copy" data-controlable="merge"></td>
  277.         <td data-drop="copy" class=""></td>
  278.         <td data-drop="copy" class=""></td>
  279.         <td data-drop="copy" class=""></td>
  280.         <td data-drop="copy" class=""></td>
  281.       
  282.       </tr>
  283.       <tr>
  284.         <td class="controlable editable">17:15-17:30</td>
  285.         <td class="editable" colspan="5" data-controlable="split">眼保健操</td>
  286.       </tr>
  287.       <tr>
  288.         <td class="controlable editable">17:30-18:15</td>
  289.         <td data-drop="copy" data-controlable="merge"></td>
  290.         <td data-drop="copy"></td>
  291.         <td data-drop="copy"></td>
  292.         <td data-drop="copy"></td>
  293.         <td data-drop="copy"></td>

  295.       </tr>
  296.       <tr>
  297.         <td class="controlable editable">18:25-19:10</td>
  298.         <td data-drop="copy" data-controlable="merge"></td>
  299.         <td data-drop="copy"></td>
  300.         <td data-drop="copy"></td>
  301.         <td data-drop="copy"></td>
  302.         <td data-drop="copy"></td>

  304.       </tr>
  305.       
  306.     </tbody>
  307.   </table>

  309.                
  310.       <svg  id="svg"></svg>   
  311.     </div>
  312.    
  313.     </div>
  314.                 </div>
  315.           </div>
  316.     <script>
  317.    
  318.           document.addEventListener('DOMContentLoaded', function () {

  320.   //定义数组
  321. //  if (this.localStorage.getItem('contentHTML')) {
  322.    
  323. //alert('数据已从 localStorage 加载成功');
  324.   //}

  326. loadpoition() ;
  327.          
  328. var str = "今天是星期";
  329. var week = new Date().getDay();
  330. switch (week) {
  331.         case 0 :
  332.                 str += "日";
  333.                 break;
  334.         case 1 :
  335.                 str += "一";
  336.                                 drawhq(220);
  337.                        
  338.                 break;
  339.         case 2 :
  340.                 str += "二";
  341.                                 drawhq(306);
  342.                 break;
  343.         case 3 :
  344.                 str += "三";
  345.                                 drawhq(392);
  346.                 break;
  347.         case 4 :
  348.                 str += "四";
  349.                                 drawhq(478);
  350.                 break;
  351.         case 5 :
  352.                 str += "五";
  353.                                 drawhq(564);
  354.                 break;
  355.         case 6 :
  356.                 str += "六";
  357.                 break;
  358. }
  359. //alert(str);



  363. //draw();
  364.        // 获取所有可拖动的课程项
  365.         const draggables = document.querySelectorAll('.left > div');
  366.         // 获取所有可放置课程的时间段单元格（不包括第一列）
  367.         const droppables = document.querySelectorAll('.right td:not(:first-child)');

  369.         // 添加拖拽开始事件监听器
  370.         draggables.forEach(draggable => {
  371.             draggable.addEventListener('dragstart', e => {
  372.                 e.dataTransfer.setData('text/plain', e.target.className);
  373.                 e.dataTransfer.dropEffect = 'move';
  374.             });
  375.         });

  377.         // 添加拖拽进入和放置事件监听器
  378.         droppables.forEach(droppable => {
  379.             droppable.addEventListener('dragover', e => {
  380.                 e.preventDefault();
  381.                 e.dataTransfer.dropEffect = 'move';
  382.             });

  384.             droppable.addEventListener('drop', e => {
  385.                 e.preventDefault();
  386.                 const draggedItemClass = e.dataTransfer.getData('text/plain');
  387.                 const draggedItem = document.querySelector(`.${draggedItemClass}`);

  389.                 if (e.target.tagName === 'TD') {
  390.                     e.target.textContent = draggedItem.textContent;
  391.                     e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
  392.                 }
  393.                
  394.                 archive()         
  395.             });
  396.         });





  402.           });
  403.          
  404. // 读档
  405. function loadpoition() {
  406.   const contentHTML = localStorage.getItem('contentHTML');

  408.   let contentLoaded = false;

  410.   if (contentHTML) {
  411.     const contentElement = document.querySelector('.right');
  412.     if (contentElement) {
  413.       contentElement.outerHTML = contentHTML;
  414.       contentLoaded = true; // 标记content元素已加载
  415.     } else {
  416.       console.warn('页面上未找到类名为 "content" 的元素。');
  417.     }
  418.   }

  420.   // 检查两个元素是否都已成功加载
  421.   if (contentLoaded) {
  422.   //  alert('数据已从 localStorage 加载成功');
  423.   
  424.   }
  425. }
  426.             // 存档
  427. function archive() {
  428.   const contentElement = document.querySelector('.right');

  430.   if (contentElement) {
  431.     const contentHTML = contentElement.outerHTML;
  432.     localStorage.setItem('contentHTML', contentHTML);
  433.   }
  434. // alert('数据已保存到 localStorage');
  435. }

  437.      
  438.           // 重置
  439.         function init() {


  442.   // 清空 localStorage
  443.   localStorage.removeItem('contentHTML');



  447.     alert('项目重置成功，请关闭页面后重新打开');


  450. }
  451.    
  452.    
  453.   function draw()

  455. {
  456. var svgns="http://www.w3.org/2000/svg";// 1、创建svg容器
  457. let svg = document.getElementById("svg");
  458. svg.setAttribute('height', 999);
  459. svg.setAttribute('width', 628);
  460. svg.setAttribute('viewBox',"0 0 628 999");

  462. var icon=document.createElementNS(svgns,"rect");
  463.             icon.setAttribute("x",478);  //定位小方块
  464.             icon.setAttribute("y",5);
  465.             icon.setAttribute("width",86);
  466.             icon.setAttribute("height",903);
  467.             icon.setAttribute("stroke","red");  //子外边框颜色也相同
  468.             icon.setAttribute("stroke-width","5");
  469.                   icon.setAttribute("fill","none");
  470.                 svg.appendChild(icon);
  471.     }

  473.         
  474.        
  475.        
  476.         function drawhq(hqj){
  477. var svgns="http://www.w3.org/2000/svg";// 1、创建svg容器
  478. let svg = document.getElementById("svg");
  479. svg.setAttribute('height', 999);
  480. svg.setAttribute('width', 628);
  481. svg.setAttribute('viewBox',"0 0 628 999");

  483. var icon=document.createElementNS(svgns,"rect");
  484.             icon.setAttribute("x",hqj);  //定位小方块478
  485.             icon.setAttribute("y",5);
  486.             icon.setAttribute("width",86);
  487.             icon.setAttribute("height",903);
  488.             icon.setAttribute("stroke","red");  //子外边框颜色也相同
  489.             icon.setAttribute("stroke-width","5");
  490.                   icon.setAttribute("fill","none");
  491.                 svg.appendChild(icon);
  492.                        
  493.                         return svg;
  494.     }
  495.        
  496. //        function pieChart(width,height){
  497. //        //这个表示svg元素的xml命名空间
  498. //        var svgns="http://www.w3.org/2000/svg";
  499. //
  500. //        //创建一个<svg>元素，同时指定像素大小和用户坐标
  501. //        var chart=document.createElementNS(svgns,"svg:svg");
  502. //        chart.setAttribute("width",width);
  503. //        chart.setAttribute("height",height);
  504. //        chart.setAttribute("viewBox","0 0 "+width+" "+height);
  505. //            //绘制小方块表示图例
  506. //            var icon=document.createElementNS(svgns,"rect");
  507. //            icon.setAttribute("x",100);  //定位小方块
  508. //            icon.setAttribute("y",0);
  509. //            icon.setAttribute("width",100);
  510. //            icon.setAttribute("height",200);
  511. //            icon.setAttribute("stroke","black");  //子外边框颜色也相同
  512. //            icon.setAttribute("stroke-width","2");
  513. //                      icon.setAttribute("fill","none");
  514. //            chart.appendChild(icon);
  515. //                       
  516. //        return chart;
  517. //    }
  518.        

  520.     </script>
  521. </body>
  522. </html>
复制代码


回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|Archiver|捐助支持|无忧启动 ( 闽ICP备05002490号-1 )

闽公网安备 35020302032614号

GMT+8, 2025-8-19 03:59

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表