前言
hello，今天实现点小动画，帮助学习理解Web api的拖拽效果，这里实现的是可拖拽的课程表！#
效果图
附：作者没钱去除水印，就这样看一下简单的看一下效果吧！
实现前言知识
这里我使用事件委托，统一将拖拽事件委托给父元素contaniner。
实现该元素可拖拽
这里我们使用dom的一个属性draggable，将该属性设置为true，即可拖拽
<div draggable="true" class="color-1 item">语文</div>
拖拽开始事件
container.ondragstart，记录拖拽开始时触发的事件，只触发一次，返回拖拽元素本身的dom节点
//拖拽开始事件，只触发一次
container.ondragstart = e => {
console.log('start', e.target)
}
拖拽结束事件
表示该元素拖拽到哪个元素之上，不断触发
container.ondragover = e => {
e.preventDefault();
// console.log('over', e.target)
}
拖拽移入事件
类似于mouse enter，记录该元素拖拽经过哪些元素，经过只触发一次
container.ondragenter = e => {
// console.log('enter', e.target)
}
拖拽松开事件
拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的。为了触发需要阻止浏览器默认事件，在ondragover中阻止
container.ondrop =e=>{
// console.log('drop', e.target)
}
container.ondragover = e => {
e.preventDefault();
// console.log('over', e.target)
}
实现步骤
设定移动区域划分
首先，我这边有两块可以移入的区域，第一是课程类区域，第二是课程表格区域，因此，我们使用data-drop="move"和data-drop="copy"，分别代表课程类区域和课程表格区域。
这里我使用的是flex布局，将两块区域分为左右两边，也就是left和right。
<div class="left" data-drop="move">
<div data-effect="copy" draggable="true" class="color-1 item">语文</div>
<div data-effect="copy" draggable="true" class="color-2 item">数学</div>
<div data-effect="copy" draggable="true" class="color-3 item">英语</div>
<div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
<div data-effect="copy" draggable="true" class="color-5 item">政治</div>
<div data-effect="copy" draggable="true" class="color-6 item">历史</div>
</div>
<div class="right">
<table border="1">
<colgroup>
<col span="6" style="background-color:#fff">
</colgroup>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td></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>
</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>
</tr>
</table>
</div>
获取拖拽节点，设定节点本身的属性
当拖拽该元素时，该节点下面会有一个‘+’的符号，这个是浏览器默认给他加上的，我们需要自定义该属性，当他拖拽到某个区域时候，就设定该属性的值为区域的值
这里我们在拖拽元素上添加一个属性data-effect="copy"，通过e.target.dataset.effect获取值，并赋值给该属性
let source;
//拖拽开始事件，只触发一次
container.ondragstart = e => {
//移动取消出现+号的效果
e.dataTransfer.effectAllowed = e.target.dataset.effect;
source = e.target
console.log('start', e.target)
}
拖拽移动，区域样式变化
当我们拖拽移动的时候，对应的区域样式变化。
首先我们要先阻止浏览器的默认行为，否则不会触发ondrop事件
container.ondragover = e => {
e.preventDefault();
// console.log('over', e.target)
}
同时，进入某个区域的时候，样式发生变化，但是由于它移入可以会经过其他元素，所以我们要先清除之前拖拽的样式。
//清除移动的样式
function removeDropStyle() {
document.querySelectorAll('.drop-over').forEach((node) => {
node.classList.remove('drop-over')
})
}
container.ondragenter = e => {
//清除之前拖拽的样式
removeDropStyle()
const dropNode = getDropNode(e.target)
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
//该节点能够接受目前拖拽节点
e.target.classList.add('drop-over')
}
// console.log('enter', e.target)
}
到这里，我们就实现了拖拽该元素，并且移动到哪个区域，哪个区域的样式就会发生改变，接下来就是松开拖拽，对应区域就拥有拖拽元素。
拖拽松开，区域变化
我们要解决的问题有：
一、判断该元素是否有drop属性，如果没有，就去父元素找。
二、清除之前的元素
三、如果是move区域，就直接移除元素即可
container.ondrop = e => {
//清除拖拽的样式
removeDropStyle()
console.log('drop', e.target)
const dropNode = getDropNode(e.target)
//该节点能够接受目前拖拽节点
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
//两种情况，是拖拽到哪个区域,如果是copy区域
if (dropNode.dataset.drop === 'copy') {
//清除之前的元素
dropNode.innerHTML = ''
//把该元素复制一份
const cloned = source.cloneNode(true)
cloned.dataset.effect = 'move'
dropNode.appendChild(cloned)
//如果是move区域
} else {
console.log("1111111")
source.remove()
}
}
}
//获取该元素是否有父元素
function getDropNode(node) {
while (node) {
if (node.dataset.drop) {
return node
}
node = node.parentNode
}
}
完整代码
index.js
//直接监控父元素，使用事件委托
const container = document.querySelector('.container');
let source;
//拖拽开始事件，只触发一次
container.ondragstart = e => {
//移动取消出现+号的效果
e.dataTransfer.effectAllowed = e.target.dataset.effect;
source = e.target
console.log('start', e.target)
}
//拖拽结束事件,表示拖拽这个元素到哪个元素之上，不断触发
container.ondragover = e => {
e.preventDefault();
// console.log('over', e.target)
}
//拖拽移入事件，只触发一次
container.ondragenter = e => {
//清除之前拖拽的样式
removeDropStyle()
const dropNode = getDropNode(e.target)
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
//该节点能够接受目前拖拽节点
e.target.classList.add('drop-over')
}
// console.log('enter', e.target)
}
//拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的，触发阻止浏览器默认事件，在ondragover中阻止
container.ondrop = e => {
//清除拖拽的样式
removeDropStyle()
console.log('drop', e.target)
const dropNode = getDropNode(e.target)
//该节点能够接受目前拖拽节点
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
//两种情况，是拖拽到哪个区域,如果是copy区域
if (dropNode.dataset.drop === 'copy') {
//清除之前的元素
dropNode.innerHTML = ''
//把该元素复制一份
const cloned = source.cloneNode(true)
cloned.dataset.effect = 'move'
dropNode.appendChild(cloned)
//如果是move区域
} else {
console.log("1111111")
source.remove()
}
}
}
//获取该元素是否有父元素
function getDropNode(node) {
while (node) {
if (node.dataset.drop) {
return node
}
node = node.parentNode
}
}
//清除移动的样式
function removeDropStyle() {
document.querySelectorAll('.drop-over').forEach((node) => {
node.classList.remove('drop-over')
})
}
index.css
body {
margin: 0;
padding: 0;
}
h1 {
width: 100%;
text-align: center;
}
.container {
width: 100%;
height: 800px;
display: flex;
flex-direction: row;
}
.left {
width: 5%;
background: #f3f4f5;
display: flex;
flex-direction: column;
align-items: center;
}
.item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 70px;
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
color: #fff;
}
.right {
margin-left: 40px;
width: 95%;
background: #f3f4f5;
}
.color-1 {
background: red;
}
.color-2 {
background: rgb(18, 49, 189);
}
.color-3 {
background: rgb(22, 153, 33);
}
.color-4 {
background: rgb(150, 136, 12);
}
.color-5 {
background: rgb(110, 9, 114);
}
.color-6 {
background: rgb(192, 118, 22);
}
td {
width: 90px;
height: 70px;
;
}
.drop-over {
background: rgba(212, 13, 56, 0.067);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可拖拽课程表</title>
<link href="./index.css" rel="stylesheet"></link>
</head>
<body>
<h1>课程表</h1>
<div class="container">
<div class="left" data-drop="move">
<div data-effect="copy" draggable="true" class="color-1 item">语文</div>
<div data-effect="copy" draggable="true" class="color-2 item">数学</div>
<div data-effect="copy" draggable="true" class="color-3 item">英语</div>
<div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
<div data-effect="copy" draggable="true" class="color-5 item">政治</div>
<div data-effect="copy" draggable="true" class="color-6 item">历史</div>
</div>
<div class="right">
<table border="1">
<colgroup>
<col span="6" style="background-color:#fff">
</colgroup>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td></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>
</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>
</tr>
</table>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
