今天让我们试一下js中的比较有趣味的拖拽api，用他来做成一个课程表！
一、实现目标
二、过程
1、html实现
第一步
创建一个container的拖拽区域，左边准备放课程，然后给每一个div设置同一个draggable为truetrue，即允许拖拽
第二步
然后创建两个table里面的格子分布如下所示
js实现
<script>
// container是可拖拽区域，超出这个范围无效
const container = document.querySelector('.container');
// 获得那两个table
const table = document.querySelectorAll('.table')
// 拖拽开始位置
container.ondragstart = (e) => {
// 图表示拖拽
e.dataTransfer.effectAllowed = 'move';
// 将拖拽的文本内容设置在拖拽的参数里面
e.dataTransfer.setData('text', e.target.innerText);
}
// 定义拖拽的过程(必不可少，因为这个过程一直记录拖拽的位置！！)
container.ondragover = (e) => {
e.preventDefault();
}
// 拖拽进入组件的事件
// table.ondragenter = (e) => {
// }
// // 拖拽离开组件的事件
// table.ondragleave = (e) => {
// }
// 给两个table的松手时候的位置设置拖拽事件
table.forEach(item => {
item.ondrop = (e) => {
e.preventDefault();
// 获得拖拽体中开始记录的文本内容
const courseName = e.dataTransfer.getData('text');
// 将拖拽到的区域填入文本内容
e.target.innerHTML = `<td>${courseName}</td>`;
}
})
</script>
三、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
}
.left {
border-radius: 20px;
margin: 0px 10px;
background-color: rgba(62, 63, 63, 0.4);
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 50px;
}
.right {
border-radius: 20px;
padding: 20px;
background-color: rgba(62, 63, 63, 0.4);
}
.right table tr td {
text-align: center;
/* 水平居中文本 */
vertical-align: middle;
/* 垂直居中文本 */
width: 20px;
height: 20px;
}
.item {
margin-bottom: 10px;
padding: 10px 20px;
border-radius: 10px;
opacity: 0.8;
float: left;
white-space: nowrap;
}
tr {
height: 50px;
}
.color1 {
background-color: #ff0000;
}
.color2 {
background-color: #00ff00;
}
.color3 {
background-color: #0000ff;
}
.color4 {
background-color: #ffff00;
}
.color5 {
background-color: #ff00ff;
}
.color6 {
background-color: #00ffff;
}
.color7 {
background-color: #808080;
}
</style>
</head>
<body>
<h1>课程表</h1>
<div class="container">
<div class="left">
<div draggable="true" class="color1 item">语文</div>
<div draggable="true" class="color2 item">数学</div>
<div draggable="true" class="color3 item">英语</div>
<div draggable="true" class="color4 item">音乐</div>
<div draggable="true" class="color5 item">政治</div>
<div draggable="true" class="color6 item">历史</div>
<div draggable="true" class="color7 item">体育</div>
</div>
<div class="right">
<table border="1" width="800px" height="270px" class="table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br><br><br>
<table border="1" width="800px" height="270px" class="table" fixed>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<script>
const container = document.querySelector('.container');
const table = document.querySelectorAll('.table')
// 拖拽开始位置
container.ondragstart = (e) => {
e.dataTransfer.effectAllowed = 'move';
console.log(e.target);
e.dataTransfer.setData('text', e.target.innerText);
}
// 定义拖拽的过程
container.ondragover = (e) => {
e.preventDefault();
}
// 拖拽进入组件的事件
// table.ondragenter = (e) => {
// }
// // 拖拽离开组件的事件
// table.ondragleave = (e) => {
// }
// 松手时候的位置
table.forEach(item => {
item.ondrop = (e) => {
e.preventDefault();
const courseName = e.dataTransfer.getData('text');
// 创建一个新单元格
e.target.innerHTML = `<td>${courseName}</td>`;
}
})
</script>
</body>
</html>