Draggable 拖拽实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>课程表拖拽</title>
<style type="text/css">
h1 {
text-align: center;
}
.container {
display: flex;
}
.left {
background: #eee;
height: 550px;
width: 100px;
}
.left div{
margin: 10px;
}
.item {
text-align: center;
color: white;
cursor: pointer;
width: 80px;
height: 30px;
line-height: 30px;
}
.right {
background: #eee;
width: calc(100% - 100px);
margin-left: 20px;
padding: 10px;
}
.color1 {
background: #BA55D3;
}
.color2 {
background: #BC8F8F;
}
.color3 {
background: #B8860B;
}
.color4 {
background: #B22222;
}
.color5 {
background: #B0E0E6;
}
.color6 {
background: #ADFF2F;
}
.color7 {
background: #9932CC;
}
.color8 {
background: #DB7093;
}
.color9 {
background: #87CEFA;
}
.color10 {
background: #32CD32;
}
.color11 {
background: #0000CD;
}
table {
text-align: center;
border-collapse: collapse;
margin: 0 auto;
border: 1px solid #696969;
}
table tr th {
border: 1px solid #696969;
padding: 15px;
background: #DCDCDC;
font-weight: bold;
color: #000;
}
table td {
border: 1px solid #696969;
width: 100px;
height: 50px;
}
.ths {
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background: none;
}
.drop-over {
background: #696969;
}
</style>
</head>
<body>
<h1>课程表拖拽</h1>
<div class="container">
<div class="left" data-drop="move">
<div draggable="true" data-effect="copy" class="color1 item">语文</div>
<div draggable="true" data-effect="copy" class="color2 item">数学</div>
<div draggable="true" data-effect="copy" class="color3 item">英语</div>
<div draggable="true" data-effect="copy" class="color4 item">物理</div>
<div draggable="true" data-effect="copy" class="color5 item">化学</div>
<div draggable="true" data-effect="copy" class="color6 item">生物</div>
<div draggable="true" data-effect="copy" class="color7 item">政治</div>
<div draggable="true" data-effect="copy" class="color8 item">历史</div>
<div draggable="true" data-effect="copy" class="color9 item">地理</div>
<div draggable="true" data-effect="copy" class="color10 item">音乐</div>
<div draggable="true" data-effect="copy" class="color11 item">体育</div>
</div>
<div class="right">
<table border="1">
<tr>
<th class="ths"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center" valign="middle">
<td rowspan="4" style="background: #DCDCDC;">
上
<br>
<br>
午
</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 align="center" valign="middle">
<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 align="center" valign="middle">
<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 align="center" valign="middle">
<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 align="center" valign="middle">
<td style="border-left: 1px solid #eee;border-right: 1px solid #eee;" colspan="8">
午休
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="4" style="background: #DCDCDC;">
下
<br>
<br>
午
</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 align="center" valign="middle">
<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 align="center" valign="middle">
<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 align="center" valign="middle">
<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>
</body>
<script src="js/project.js"></script>
</html>
const container = document.querySelector(".container");
let source;
container.ondragstart = (e) => {
e.dataTransfer.effectAllowed = e.target.dataset.effect;
source = e.target;
}
function clearStyles() {
document.querySelectorAll('.drop-over').forEach((node) => {
node.classList.remove('drop-over');
})
}
function getDropNode(node) {
while (node) {
if (node.dataset && node.dataset.drop) {
return node;
}
node = node.parentNode;
}
}
container.ondragover = (e) => {
e.preventDefault();
// console.log("over",e.target);
}
container.ondragenter = (e) => {
clearStyles();
const dropNode = getDropNode(e.target);
if (!dropNode) {
return;
}
if (source.dataset.effect === dropNode.dataset.drop) {
dropNode.classList.add("drop-over");
}
}
container.ondrop = (e) => {
// console.log("drop",e.target);
const dropNode = getDropNode(e.target);
if (!dropNode) {
return;
}
if (source.dataset.effect !== dropNode.dataset.drop) {
return;
}
clearStyles();
if (dropNode.dataset.drop === 'copy') {
const cloned = source.cloneNode(true);
cloned.dataset.effect = 'move';
dropNode.innerHTML = '';
dropNode.appendChild(cloned);
} else {
source.remove();
}
}
本文来自博客园，作者：小珍珠在河里敲代码，转载请注明原文链接：https://www.cnblogs.com/Jansens520/p/18123871
