拖放元素时，拖放事件发生顺序如下：
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave
他们的event对象特有一个dataTransfer属性，主要用于源元素和目标元素之间传递数据
dataTransfer属性如下：
1. setData(key, value)
该方法只能在dragstart中调用，其他事件回调中调用无效
key:数据的类型或格式（也可以自定义）
| 名称 | 含义 |
|---|---|
| text/plain | 文本格式 |
| text/html | html格式 |
| text/uri-list | 链接格式 |
拖动文本（默认是text）或者从操作系统向浏览器拖拽文件时，无需调用，系统会自动完成
2. getData(key)
只能在drop中调用，获取具体的值
3. clearData([key])
清空数据，该方法只接收一个参数，要删除的数据类型
参数是可选的，如果不传参，删除所有数据类型
4. effectAllowed
设置或返回被拖动元素允许的操作行为。通常会与dropEffect结合使用
在dragstart中设置，其他事件回调中设置是无效的
| 名称 | 含义 |
|---|---|
| none | 不允许拖放，一旦设置了该属性，所有的拖放事件都无效了 |
| copy | 复制拖动元素 |
| move | 移动 |
| link | 链接 |
| copymove | 移动或者链接 |
| copyLink | 复制或者链接 |
| linkMove | 链接或者移动 |
| all | 任何操作都允许 |
5. dropEffect
设置目标元素上允许的拖放行为
可设置的值有：none copy link move
如果dropEffect的值不在effectAllowed范围内时拖放操作不会实现
6. files
文件信息，一般用于将文件从桌面拖动到浏览器目标区域
7. items
代表拖动数据
8. setDragImage(element, x, y)
设置拖动时显示的图像信息， 他可以是画布或者其他任何元素
element：要自定义显示的图像，
x：图像距离鼠标位置水平偏移量，
y：图像距离鼠标位置垂直偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽测试</title>
<style>
#drag-target {
background: green;
width: 80px;
height:30px;
font-size:16px;
padding: 20px;
cursor: move;
}
#drag-aim {
list-style: none;
padding:0;
}
#drag-aim li {
padding:0;
margin: 20px 0;
height: 40px;
border: 1px solid #eee;
border-radius: 5px;
}
#drag-aim li.active {
background: rgba(255, 0, 0, .5);
border-color: red;
transition: all 0.3s;
}
</style>
</head>
<body>
<div id="drag-target" draggable="true">
try to drag me!
</div>
<p>
选中文本，并且拖动试一下！！！！！！！
</p>
<ul id="drag-aim">
<li>目标区域一</li>
<li>目标区域二</li>
<li>目标区域三</li>
</ul>
<script>
let target = document.querySelector('#drag-target');
let aim = document.querySelector('#drag-aim').querySelectorAll('li');
var img = new Image()
img.src= "assets/1.png"
target.addEventListener('dragstart', function(e){
console.log('开始拖动了')
aim[0].className = 'active'
e.dataTransfer.effectAllowed = "copyLink"
// 设置拖拽数据
e.dataTransfer.setData('aaa', 'https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956')
e.dataTransfer.setData('text/uri-list','https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956')
// 设置拖动图像
e.dataTransfer.setDragImage(img, 25, 25)
}, false)
target.addEventListener('dragend', function(e){
console.log('拖拽结束')
console.log(e.dataTransfer)
aim[0].className = ''
})
aim[0].addEventListener('dragover', function(e){
e.dataTransfer.dropEffect = 'link'
// 必须加这句，表示允许放置元素，否则监听不到drop事件
e.preventDefault()
}, false)
aim[0].addEventListener('drop', function(e){
e.preventDefault()
console.log('拖给我了！')
console.log(e.dataTransfer.getData('aaa'))
console.log(e.dataTransfer.getData('text'))
aim[0].appendChild(target)
}, false)
</script>
</body>
</html>
