这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
前言
昨天学习了js的剪切板事件，今天来学习js的拖拽事件。
介绍
js的拖拽事件主要有dragstart，drag，dragend，dragenter，dragover，dragleave，drop事件。
用表格来展示
| 拖拽事件 | 说明 |
|---|---|
dragstart | 拖拽元素开始拖拽时触发 |
drag | 在拖拽过程中持续触发 |
dragend | 拖拽完成后，释放鼠标时触发，一般是拖拽区域绑定该事件 |
dragenter | 拖拽刚进入目标区域时触发，一般是目标区域绑定该事件 |
dragover | 拖拽进入目标区域后持续触发，可以给目标区域设置拖拽等视觉效果，一般是目标区域绑定该事件 |
dragleave | 拖拽离开目标区域时触发，一般是目标区域绑定该事件 |
drop | 拖拽完成后，释放鼠标时触发，一般是目标区域绑定该事件。另外触发该事件，需要在先dragover事件阻止默认事件，不然drop事件不会触发。如果从外部拖拽图片等文件，需要阻止默认行为，不然浏览器默认会打开 |
一般情况下：
dragstart，drag, dragend事件是拖拽区域绑定
dragenter,dragover,dragleave, drop事件是目标区域绑定。
需要注意：
拖拽区域需要设置draggable属性为true，这个属性代表拖拽区域可拖拽，不然无效果。
dataTransfer对象
因为拖拽一般都需要传输数据，它的event对象里面有个dataTransfer对象。通过这个对象来设置拖拽效果和传输数据，来看看它有哪些字段
方法：
-
setData(key, value)
设置拖拽的数据
-
getData(key)
获取拖拽的数据
属性：
-
effectAllowed
当前拖拽过程中允许鼠标显示的类型，值有
none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized。一般是在
dragstart事件设置。如果为none,则不允许拖拽。默认值uninitialized,为未设置，等同于all（允许所有类型）。 -
dropEffect
拖拽过程中在目标区域鼠标显示的类型，或者设置目标区域鼠标显示的类型，值有
none,copy,link或move。一般是在
dragover事件设置，同时要阻止默认事件，不然没有效果。如果为none,则不允许拖拽。同时dropEffect的值需要和effectAllowed需要保持一致。比如
copyLink和copy等。 -
files
数组类型，拖拽文件时该属性会有值。代表的是文件列表。每一项都是
file对象 -
items
拖拽内容的列表，列表的每一项包含
kind和type属性。（可以参考我的剪切板事件的paste事件，这里不做赘述）如果是普通的文本拖拽，则需要调用
setData(key, value)方法，items才会有值。图片等文件则无需要。 -
types
数组类型，拖拽数据的类型列表。值有
Files，text/html等， 如果你调用了setData(key, value)，值就是key。
简单实现一个拖拽文字例子：
<style>
.drag-box,
.drop-box {
width: 200px;
height: 200px;
float: left;
border: 1px solid red;
margin-right: 30px;
}
</style>
<div class="drag-box">
<div draggable="true">你好，我是答案cp3！</div>
</div>
<div class="drop-box"></div>
<script>
const dragBox = document.querySelector('.drag-box')
const dropBox = document.querySelector('.drop-box')
// 开始拖拽
dragBox.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('name', e.target.innerText)
})
// 正在拖拽
dropBox.addEventListener('dragover', (e) => {
e.dataTransfer.effectAllowed = 'copy'
e.preventDefault();
console.log('我是dragover事件')
})
// 拖拽结束
dropBox.addEventListener('drop', (e) => {
console.log(e.dataTransfer.types)
const items = e.dataTransfer.items
for (let i = 0; i < items.length; i++) {
items[i].getAsString((str) => {
console.log(str)
})
}
const name = e.dataTransfer.getData('name')
e.target.innerText = name
})
</script>
效果如下：
总结
以上就是我总结的js的拖拽事件，大家可以复制代码去试试，体验一下。
感谢你们的阅读。
