<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
width: 1000px;
margin: 100px auto 0;
display: flex;
background-color: #ccc;
.item1 {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.item2 {
flex: 2;
height: 40px;
}
.item7 {
flex: 7;
height: 40px;
display: flex;
.item {
height: inherit;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
}
}
.c1 {
background-color: blue;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.c2 {
background-color: orange;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.c3 {
background-color: green;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.c4 {
background-color: purple;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.c5 {
background-color: orangered;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.c6 {
background-color: teal;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 1000px;
margin: 0 auto;
display: flex;
background-color: #eee;
.class_dir {
flex: 0 0 100px;
padding: 10px;
}
.time_tip {
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: flex-end;
.time1 {
height: 160px;
width: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #Bbb;
}
.time2 {
height: 160px;
width: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #Bbb;
margin-top: 40px;
}
}
.time_task {
flex: 0 0 700px;
}
}
.class_dir div {
width: 100%;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
margin-bottom: 10px;
color: #fff;
}
.morning,
.afternoon {
display: flex;
flex-wrap: wrap;
}
.morning div,
.afternoon div {
flex: 0 0 20%;
width: 140px;
height: 40px;
border-top: 1px solid #222;
border-left: 1px solid #222;
}
.morning div:nth-child(5n),
.afternoon div:nth-child(5n) {
border-right: 1px solid #222;
}
.morning div:nth-child(n + 16),
.afternoon div:nth-child(n + 16) {
border-bottom: 1px solid #222;
}
.afternoon {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="title">
<div class="item1">课程</div>
<div class="item2"></div>
<div class="item7">
<div class="item">周一</div>
<div class="item">周二</div>
<div class="item">周三</div>
<div class="item">周四</div>
<div class="item">周五</div>
</div>
</div>
<div class="container">
<div class="class_dir">
<div
draggable="true"
class="c1"
data-mode="move"
>政治</div>
<div
draggable="true"
class="c2"
data-mode="move"
>高数</div>
<div
draggable="true"
class="c3"
data-mode="move"
>音乐</div>
<div
draggable="true"
class="c4"
data-mode="move"
>体育</div>
<div
draggable="true"
class="c5"
data-mode="move"
>微机</div>
<div
draggable="true"
class="c6"
data-mode="move"
>CAD</div>
</div>
<div class="time_tip">
<div class="time1">
<span>上</span>
<span style="margin-top: 20px;">午</span>
</div>
<div class="time2">
<span>下</span>
<span style="margin-top: 20px;">午</span>
</div>
</div>
<div class="time_task">
<div class="morning">
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
</div>
<div class="afternoon">
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
<div data-mode="receive"></div>
</div>
</div>
</div>
<script>
const container = document.querySelector('.container')
let moveEl = null
container.addEventListener('dragstart', ev => {
moveEl = ev.target
})
container.addEventListener('dragend', ev => {
// console.log(ev.target, 'end')
})
container.addEventListener('dragenter', ev => {
// console.log(ev.target, 'enter')
})
// 经过的元素, 会一直触发
container.addEventListener('dragover', ev => {
ev.preventDefault();
// console.log(ev, 'over')
})
container.addEventListener('drop', ev => {
const mode = ev.target.getAttribute('data-mode')
const old = moveEl.getAttribute('data-mode')
if (old === 'move' && mode === 'receive') {
const newEl = moveEl.cloneNode(true)
newEl.setAttribute('data-mode', 'remove')
ev.target.appendChild(newEl)
}
if (old === 'remove' && mode === 'move') {
moveEl.parentNode.innerHTML = ''
}
if (old === 'remove' && mode === 'receive') {
ev.target.appendChild(moveEl)
}
})
</script>
</body>
</html>
标签：flex,HTML,color,items,API,有感而发,ev,display,center From： https://www.cnblogs.com/fmg0224/p/17789927.html