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

无忧启动论坛

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

为了证明我 不是大大说的玻璃心 再发一个 呵呵!

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

本文代码大部分参考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
19#
发表于 昨天 03:54 | 只看该作者
可加个按钮，一键复位，还原到拖动前的状态。

评分

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

查看全部评分

回复

使用道具 举报

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

使用道具 举报

17#
发表于 7 天前 | 只看该作者
我是爱钻 牛角尖 的执着人！

评分

参与人数 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 | 只看该作者
备用
回复

使用道具 举报

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

本版积分规则

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

闽公网安备 35020302032614号

GMT+8, 2025-8-18 00:07

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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