设为首页收藏本站
开启辅助访问

无忧启动论坛

 找回密码
 注册
搜索
无忧启动论坛»论坛 › ::启动制作:: › 综合讨论区 › [刚更新了一次] 为了证明我 不是大大说的玻璃心 再发一 ...

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

查看数: 1716 | 评论数: 21 | 收藏 3
关灯 | 提示：支持键盘翻页<-左 右->
帖子模式
    组图打开中，请稍候......
879792799
发布时间: 2025-8-8 14:01

正文摘要:

本帖最后由 879792799 于 2025-8-18 11:48 编辑 更新了一下  在2楼  比较随意 以后慢慢改   本文代码大部分参考https://zhuanlan.zhihu.com/p/698006468?_refluxos=a10 -----有 ...

回复

xtwwz 发表于 4 小时前
879792799 发表于 2025-8-18 11:47
重置按钮已添加在2楼

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

已经很好了，谢谢。
879792799 发表于 昨天 11:47
xtwwz 发表于 2025-8-18 00:31
课程可以扩展么，比如扩展到初中、高中里有的课程？如能给出一些修改建议，就更好了。

   
重置按钮已添加在2楼

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

点评

xtwwz
已经很好了，谢谢。  详情 回复 发表于 4 小时前
xtwwz 发表于 昨天 00:31
课程可以扩展么，比如扩展到初中、高中里有的课程？如能给出一些修改建议，就更好了。

点评

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

评分

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

查看全部评分

879792799 发表于 3 天前
准备加个遮罩层来提示当天课程  更加直观!!请关注最近要更新一下!
Zhengqiang5q 发表于 2025-8-11 05:59:00
我是爱钻 牛角尖 的执着人！

评分

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

查看全部评分

2011ch4456 发表于 2025-8-10 08:26:10
还 特意搜了下 楼主的帖子

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

评分

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

查看全部评分

2011ch4456 发表于 2025-8-9 13:53:16
楼主的想法 可以呀 想法很奇特 有点意思  

点评

879792799
呵呵 兴趣使然！  发表于 2025-8-10 19:59
燕飞龙 发表于 2025-8-9 08:43:48
感谢分享
Gzhq3721456 发表于 2025-8-9 08:11:40
有课代表没有？
wang1126 发表于 2025-8-9 07:41:54
谢谢楼主分享
ebaqiang 发表于 2025-8-9 06:01:28
谢谢分享
Zhengqiang5q 发表于 2025-8-8 20:40:28
版主不是玻璃心 是爱钻牛角尖的执着好男儿！

评分

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

查看全部评分

cnjd1079 发表于 2025-8-8 20:19:33
有点东西的
左岸麦田 发表于 2025-8-8 17:56:02
感觉挺方便的
201012121135 发表于 2025-8-8 15:17:00
谢谢分享
剑转流云 发表于 2025-8-8 15:10:51
这真是有点东西的
小灰兔 发表于 2025-8-8 14:49:07
感谢分享
hmaaaa 发表于 2025-8-8 14:25:34
感謝大大辛苦分享!感恩!^^
wn168cn@163.com 发表于 2025-8-8 14:24:30
做的不错 支持了
879792799 发表于 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>
复制代码


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

闽公网安备 35020302032614号

GMT+8, 2025-8-19 05:22

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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