[刚更新了一次] 为了证明我不是大大说的玻璃心再发一个呵呵! - 无忧启动论坛

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽实现排课</title>
<style>
body {
zoom:50%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 1000px;
height: 600px;
display: flex;
padding: 5px;
box-sizing: border-box;
}
.left {
margin: 0;
padding: 0;
width: 620px;
display: flex;
box-sizing: border-box;
font-size: 29px;
}
.yu { background: #999999;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.yi { background: #FC6B66;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.wuu { background: #09496C;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.shu { background: skyblue; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.ying { background: mediumslateblue;width: 180px; height: 70px;line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.wu { background: aqua; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.hua { background: violet; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.sheng { background: navajowhite; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.right { background: rgb(238, 238, 238); padding: 0px; height: fit-content; font-size: 25px;}
.info { display: flex; justify-content: center; }
table { font-family: monospace; table-layout: fixed; margin-bottom: 20px; }
table.colorless .item { background: unset; color: unset; }
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; }
th { font-weight: normal; background: rgb(204, 204, 204); }
td[data-drop="copy"] { width: 80px; }
thead th.editable { width: 176px; height: 60px; }
thead th.controlable.editable { width: 80px; height: 60px; }
tbody th.controlable.editable { width: 44px; height: auto; }
tbody td.controlable.editable { width: 124px; height: 60px; }
tbody td.editable { width: auto; height: 60px; }
body td { width: 80px; height: 60px; position: relative; }
</style>
</head>
<body>
<div class="box">
<div class="right">
<div class="content" id="content">
<div class="left">
<div class="yu" draggable="true">语文</div>
<div class="shu" draggable="true">数学</div>
<div class="ying" draggable="true">英语</div>
<div class="wu" draggable="true">物理</div>
</div>
<div class="left">
<div class="hua" draggable="true">化学</div>
<div class="sheng" draggable="true">地理</div>
<div class="yi" draggable="true">音乐</div>
<div class="wuu" draggable="true">武术</div>
</div>
<div class="info"><h1 class="editable">离线本地存储-可拖拽小学课表</h1> </div>
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="editable" colspan="2">时间</th>
<th class="controlable editable">星期一</th>
<th class="controlable editable">星期二</th>
<th class="controlable editable">星期三</th>
<th class="controlable editable">星期四</th>
<th class="controlable editable">星期五</th>
</tr>
</thead>
<tbody>
<tr>
<th class="controlable editable" rowspan="6">上午</th>
<td class="controlable editable">08:00-08:30</td>
<td class="editable" colspan="5" data-controlable="split">早读</td>
</tr>
<tr>
<td class="controlable editable">08:35-9:20</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">9:30-10:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">10:15-10:40</td>
<td class="editable" colspan="5" data-controlable="split">课间操</td>
</tr>
<tr>
<td class="controlable editable">10:40-11:25</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">11:35-12:20</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<th class="controlable editable" rowspan="1">中午</th>
<td class="controlable editable">12:20-15:30</td>
<td class="editable" colspan="5" data-controlable="split">午休</td>
</tr>
<tr>
<th class="controlable editable" rowspan="5">下午</th>
<td class="controlable editable">15:35-16:20</td>
<td data-drop="copy" data-controlable="merge" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<td class="controlable editable">16:30-17:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<td class="controlable editable">17:15-17:30</td>
<td class="editable" colspan="5" data-controlable="split">眼保健操</td>
</tr>
<tr>
<td class="controlable editable">17:30-18:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">18:25-19:10</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
//定义数组
// if (this.localStorage.getItem('contentHTML')) {
//alert('数据已从 localStorage 加载成功');
//}
loadpoition() ;
// 获取所有可拖动的课程项
const draggables = document.querySelectorAll('.left > div');
// 获取所有可放置课程的时间段单元格（不包括第一列）
const droppables = document.querySelectorAll('.right td:not(:first-child)');
// 添加拖拽开始事件监听器
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.className);
e.dataTransfer.dropEffect = 'move';
});
});
// 添加拖拽进入和放置事件监听器
droppables.forEach(droppable => {
droppable.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
droppable.addEventListener('drop', e => {
e.preventDefault();
const draggedItemClass = e.dataTransfer.getData('text/plain');
const draggedItem = document.querySelector(`.${draggedItemClass}`);
if (e.target.tagName === 'TD') {
e.target.textContent = draggedItem.textContent;
e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
}
archive()
});
});
});
// 读档
function loadpoition() {
const contentHTML = localStorage.getItem('contentHTML');
let contentLoaded = false;
if (contentHTML) {
const contentElement = document.querySelector('.right');
if (contentElement) {
contentElement.outerHTML = contentHTML;
contentLoaded = true; // 标记content元素已加载
} else {
console.warn('页面上未找到类名为 "content" 的元素。');
}
}
// 检查两个元素是否都已成功加载
if (contentLoaded) {
// alert('数据已从 localStorage 加载成功');
}
}
// 存档
function archive() {
const contentElement = document.querySelector('.right');
if (contentElement) {
const contentHTML = contentElement.outerHTML;
localStorage.setItem('contentHTML', contentHTML);
}
// alert('数据已保存到 localStorage');
}
</script>
</body>
</html>

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽实现排课</title>
<style>
body {
zoom:50%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 1000px;
height: 600px;
display: flex;
padding: 5px;
box-sizing: border-box;
}
.table-container {
position: relative;
width: 600px; /* 容器宽度，根据需求调整 */
height: 1000px; /* 容器高度，根据需求调整 */
}
.table, .svg {
position: absolute;
top: 0;
left: 0;
}
.table {
z-index: 1; /* 表格1在下方 */
}
.svg {
z-index:2; /* 表格2在上方 */
}
.left {
margin: 0;
padding: 0;
width: 620px;
display: flex;
box-sizing: border-box;
font-size: 29px;
}
.yu { background: #999999;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.yi { background: #FC6B66;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.wuu { background: #09496C;
width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.shu { background: skyblue; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px;
}
.ying { background: mediumslateblue;width: 180px; height: 70px;line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.wu { background: aqua; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.hua { background: violet; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.sheng { background: navajowhite; width: 180px; height: 70px; line-height: 70px;
padding: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin: 10px;
}
.right { padding: 0px; height: fit-content; font-size: 25px;
z-index: 1; /* 表格1在下方 */
}
.info { display: flex; justify-content: center; }
table.colorless .item { color: unset;
z-index: 1; /* 表格1在下方 */
}
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; }
th { font-weight: normal; }
td[data-drop="copy"] { width: 80px; }
thead th.editable { width: 176px; height: 60px; }
thead th.controlable.editable { width: 80px; height: 60px; }
tbody th.controlable.editable { width: 44px; height: auto; }
tbody td.controlable.editable { width: 124px; height: 60px; }
tbody td.editable { width: auto; height: 60px; }
body td { width: 80px; height: 60px; position: relative; }
</style>
</head>
<body>
<div class="box">
<div class="right">
<div class="content" id="content">
<div class="left">
<div class="yu" draggable="true">语文</div>
<div class="shu" draggable="true">数学</div>
<div class="ying" draggable="true">英语</div>
<div class="wu" draggable="true">物理</div>
</div>
<div class="left">
<div class="hua" draggable="true">化学</div>
<div class="sheng" draggable="true">地理</div>
<div class="yi" draggable="true">音乐</div>
<div class="wuu" draggable="true">武术</div>
<button class="button init" onclick="init()">重置</button>
</div>
<div class="info"><h1 class="editable">离线本地存储-可拖拽小学课表</h1> </div>
<div class="table-container">
<table class="table">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="editable" colspan="2">时间</th>
<th class="controlable editable">星期一</th>
<th class="controlable editable">星期二</th>
<th class="controlable editable">星期三</th>
<th class="controlable editable">星期四</th>
<th class="controlable editable">星期五</th>
</tr>
</thead>
<tbody>
<tr>
<th class="controlable editable" rowspan="6">上午</th>
<td class="controlable editable">08:00-08:30</td>
<td class="editable" colspan="5" data-controlable="split">早读</td>
</tr>
<tr>
<td class="controlable editable">08:35-9:20</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">9:30-10:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">10:15-10:40</td>
<td class="editable" colspan="5" data-controlable="split">课间操</td>
</tr>
<tr>
<td class="controlable editable">10:40-11:25</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">11:35-12:20</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<th class="controlable editable" rowspan="1">中午</th>
<td class="controlable editable">12:20-15:30</td>
<td class="editable" colspan="5" data-controlable="split">午休</td>
</tr>
<tr>
<th class="controlable editable" rowspan="5">下午</th>
<td class="controlable editable">15:35-16:20</td>
<td data-drop="copy" data-controlable="merge" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<td class="controlable editable">16:30-17:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
<td data-drop="copy" class=""></td>
</tr>
<tr>
<td class="controlable editable">17:15-17:30</td>
<td class="editable" colspan="5" data-controlable="split">眼保健操</td>
</tr>
<tr>
<td class="controlable editable">17:30-18:15</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td class="controlable editable">18:25-19:10</td>
<td data-drop="copy" data-controlable="merge"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
</tbody>
</table>
<svg id="svg"></svg>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
//定义数组
// if (this.localStorage.getItem('contentHTML')) {
//alert('数据已从 localStorage 加载成功');
//}
loadpoition() ;
var str = "今天是星期";
var week = new Date().getDay();
switch (week) {
case 0 :
str += "日";
break;
case 1 :
str += "一";
drawhq(220);
break;
case 2 :
str += "二";
drawhq(306);
break;
case 3 :
str += "三";
drawhq(392);
break;
case 4 :
str += "四";
drawhq(478);
break;
case 5 :
str += "五";
drawhq(564);
break;
case 6 :
str += "六";
break;
}
//alert(str);
//draw();
// 获取所有可拖动的课程项
const draggables = document.querySelectorAll('.left > div');
// 获取所有可放置课程的时间段单元格（不包括第一列）
const droppables = document.querySelectorAll('.right td:not(:first-child)');
// 添加拖拽开始事件监听器
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.className);
e.dataTransfer.dropEffect = 'move';
});
});
// 添加拖拽进入和放置事件监听器
droppables.forEach(droppable => {
droppable.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
droppable.addEventListener('drop', e => {
e.preventDefault();
const draggedItemClass = e.dataTransfer.getData('text/plain');
const draggedItem = document.querySelector(`.${draggedItemClass}`);
if (e.target.tagName === 'TD') {
e.target.textContent = draggedItem.textContent;
e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
}
archive()
});
});
});
// 读档
function loadpoition() {
const contentHTML = localStorage.getItem('contentHTML');
let contentLoaded = false;
if (contentHTML) {
const contentElement = document.querySelector('.right');
if (contentElement) {
contentElement.outerHTML = contentHTML;
contentLoaded = true; // 标记content元素已加载
} else {
console.warn('页面上未找到类名为 "content" 的元素。');
}
}
// 检查两个元素是否都已成功加载
if (contentLoaded) {
// alert('数据已从 localStorage 加载成功');
}
}
// 存档
function archive() {
const contentElement = document.querySelector('.right');
if (contentElement) {
const contentHTML = contentElement.outerHTML;
localStorage.setItem('contentHTML', contentHTML);
}
// alert('数据已保存到 localStorage');
}
// 重置
function init() {
// 清空 localStorage
localStorage.removeItem('contentHTML');
alert('项目重置成功，请关闭页面后重新打开');
}
function draw()
{
var svgns="http://www.w3.org/2000/svg";// 1、创建svg容器
let svg = document.getElementById("svg");
svg.setAttribute('height', 999);
svg.setAttribute('width', 628);
svg.setAttribute('viewBox',"0 0 628 999");
var icon=document.createElementNS(svgns,"rect");
icon.setAttribute("x",478); //定位小方块
icon.setAttribute("y",5);
icon.setAttribute("width",86);
icon.setAttribute("height",903);
icon.setAttribute("stroke","red"); //子外边框颜色也相同
icon.setAttribute("stroke-width","5");
icon.setAttribute("fill","none");
svg.appendChild(icon);
}
function drawhq(hqj){
var svgns="http://www.w3.org/2000/svg";// 1、创建svg容器
let svg = document.getElementById("svg");
svg.setAttribute('height', 999);
svg.setAttribute('width', 628);
svg.setAttribute('viewBox',"0 0 628 999");
var icon=document.createElementNS(svgns,"rect");
icon.setAttribute("x",hqj); //定位小方块478
icon.setAttribute("y",5);
icon.setAttribute("width",86);
icon.setAttribute("height",903);
icon.setAttribute("stroke","red"); //子外边框颜色也相同
icon.setAttribute("stroke-width","5");
icon.setAttribute("fill","none");
svg.appendChild(icon);
return svg;
}
// function pieChart(width,height){
// //这个表示svg元素的xml命名空间
// var svgns="http://www.w3.org/2000/svg";
//
// //创建一个<svg>元素，同时指定像素大小和用户坐标
// var chart=document.createElementNS(svgns,"svg:svg");
// chart.setAttribute("width",width);
// chart.setAttribute("height",height);
// chart.setAttribute("viewBox","0 0 "+width+" "+height);
// //绘制小方块表示图例
// var icon=document.createElementNS(svgns,"rect");
// icon.setAttribute("x",100); //定位小方块
// icon.setAttribute("y",0);
// icon.setAttribute("width",100);
// icon.setAttribute("height",200);
// icon.setAttribute("stroke","black"); //子外边框颜色也相同
// icon.setAttribute("stroke-width","2");
// icon.setAttribute("fill","none");
// chart.appendChild(icon);
//
// return chart;
// }
</script>
</body>
</html>

复制代码