html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
th {
border: 1px solid #000;
width: 100px;
height: 50px;
text-align: center;
}
td {
border: 1px solid #000;
width: 100px;
height: 50px;
text-align: center;
}
.container {
display: flex;
}
.left {
width: 120px;
border: 1px solid #000;
overflow: auto;
}
.item {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
margin: 10px;
}
.hover {
background: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="left" data-drop="move">
<div data-effect="copy" draggable="true" class="item" style="background: blue">语文</div>
<div data-effect="copy" draggable="true" class="item" style="background: green">英语</div>
<div data-effect="copy" draggable="true" class="item" style="background: red">数学</div>
<div data-effect="copy" draggable="true" class="item" style="background: yellowgreen">科学</div>
<div data-effect="copy" draggable="true" class="item" style="background: teal">物理</div>
<div data-effect="copy" draggable="true" class="item" style="background: blueviolet">化学</div>
<div data-effect="copy" draggable="true" class="item" style="background: aqua">食物</div>
<div data-effect="copy" draggable="true" class="item" style="background: saddlebrown">美食</div>
<div data-effect="copy" draggable="true" class="item" style="background: hotpink">足球</div>
</div>
<div class="right">
<table>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="2">早自习</td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td rowspan="2">晚自习</td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
</table>
</div>
</div>
<script>
const container = document.querySelector('.container');
let sourceNode = null;
function getDropNode(node) {
while (node) {
if (node?.dataset?.drop) {
return node;
}
node = node?.parentNode;
}
}
function clearDropStyle() {
const dropNodes = document.querySelectorAll('[data-drop]');
dropNodes.forEach(node => {
node.classList.remove('hover');
})
}
container.addEventListener('dragstart', function (e) {
e.dataTransfer.effectAllowed = e.target.dataset.effect;
sourceNode = e.target;
})
container.addEventListener('dragover', function (e) {
e.preventDefault();
});
container.addEventListener('dragenter', function (e) {
clearDropStyle();
const dropNode = getDropNode(e.target);
if (!dropNode) return;
if (e.dataTransfer.effectAllowed === dropNode.dataset.drop) {
dropNode.classList.add('hover');
}
})
container.addEventListener('drop', function (e) {
clearDropStyle();
const dropNode = getDropNode(e.target);
if (!dropNode) return;
if (e.dataTransfer.effectAllowed != dropNode.dataset.drop) return;
if (e.dataTransfer.effectAllowed === 'copy') {
dropNode.innerHTML = ''
const clone = sourceNode.cloneNode(true);
clone.dataset.effect = 'move';
dropNode.appendChild(clone);
} else {
sourceNode.remove();
}
})
</script>
</body>
</html>