【DOM】实现一个课程表的拖拽功能

历史小剧场

一个皇帝从不需要用个人的良好品格来证明自己的英明，恰恰相反，在历史上，干皇帝这行的人基本都不是什么好人，因为好人干不了皇帝，朱匀炆就是铁证。----《明朝那些事儿》

1. 前置知识

1.1 DataTransfer接口

介绍一个属性：

dataTransfer.effectAllowed: 提供所有可用的操作类型。必须是 none、copy、copyLink、copyMove、link、linkMove、move、all or uninitialized

通过这个接口，我们可以控制拖拽元素的显示和操作类型。
例如：当effectAllowed设置为move时，拖拽元素不会出现+号

1.2 四个事件

一个拖拽元素操作过程会分别触发

dragstart: 当用户开始拖动元素或选择文本时触发此事件；
dragover: 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件；
dragenter: 当拖动的元素或选择文本输入有效的放置目标时，会触发此事件；
drop：拖动元素或选择文本时放开时触发此事件。注意：需要阻止浏览器默认行为。

2. 实现课程表案例

2.1 准备静态页面

左侧课程，右侧表格

<div class="container"><div class="left" data-drop="move"><div data-effect="copy" draggable="true" class="item color1">语文</div><div data-effect="copy" draggable="true" class="item color2">数学</div><div data-effect="copy" draggable="true" class="item color3">英语</div><div data-effect="copy" draggable="true" class="item color4">历史</div><div data-effect="copy" draggable="true" class="item color5">地理</div><div data-effect="copy" draggable="true" class="item color6">政治</div><div data-effect="copy" draggable="true" class="item color7">体育</div></div><div class="right"><table border><caption><h1>课程表</h1></caption><colgroup><col /><col /><col /><col /><col /><col /><col /><col /></colgroup><thead><tr><td></td><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr></thead><tbody><tr><th rowspan="4" class="span">上午</th><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 colspan="8"></td></tr><tr><th rowspan="4" class="span">下午</th><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></tbody></table></div>
</div>

2.2 添加样式

* {margin: 0;padding: 0;
}.container {margin: 0;display: flex;align-items: center;width: 100vw;height: 100vh;
}.left {display: flex;justify-content: space-around;align-items: center;flex-direction: column;width: 100px;height: 400px;flex-shrink: 0;background-color: whitesmoke;
}.item {width: 80px;height: 50px;text-align: center;line-height: 50px;color: white;
}.color1 {background-color: skyblue;
}.color2 {background-color: red;
}.color3 {background-color: orange;
}.color4 {background-color: deeppink;
}.color5 {background-color: green;
}.color6 {background-color: blue;
}
.color7 {background-color: salmon;
}.right {background-color: whitesmoke;margin: 0 20px 0 12px;
}.right table td {width: 80px;height: 50px;transition: all 1s ease-in-out;
}.drop-over {background-color: #999;
}

2.3 添加拖拽事件逻辑

const container = document.querySelector(".container")let source;
container.ondragstart = (e) => {console.log("start => ", e.target)// 设置鼠标状态为移动e.dataTransfer.effectAllowed = e.target.dataset.effectsource = e.target;
}// 会一直触发
container.ondragover = (e) => {// console.log("over => ", e.target)// 阻止浏览器默认行为e.preventDefault()
}const clearDropStyle = () => {document.querySelectorAll('.drop-over').forEach(node => {node.classList.remove('drop-over')})
}const getDropNode = (node) => {while (node) {if (node.dataset.drop) {return node;}node = node.parentNode;}
}// 只会触发一次
container.ondragenter = (e) => {console.log("enter => ", e.target)// 清楚之前的drop-overclearDropStyle()const dropNode = getDropNode(e.target)if (dropNode && Object.is(dropNode.dataset.drop, e.dataTransfer.effectAllowed)) {dropNode.classList.add('drop-over')}
}container.ondrop = (e) => {console.log("drop => ", e.target)clearDropStyle()const dropNode = getDropNode(e.target)if (dropNode && Object.is(dropNode.dataset.drop, e.dataTransfer.effectAllowed)) {if (dropNode.dataset.drop === 'copy') {dropNode.innerHTML = ''const cloned = source.cloneNode(true);cloned.dataset.effect = 'move'dropNode.appendChild(cloned)} else {// 清除source.remove()}}
}