问题及解决方法
被拖拽元素拖到目标元素后，本想通过目标元素监听ondrop事件来进行业务处理，但是实现过程中发现ondrop事件并没有触发。代码如下：
<!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>
<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');
//添加开始拖动事件
target.addEventListener('dragstart', function(e){
console.log('开始拖动了')
aim[0].className = 'active'
e.dataTransfer.effectAllowed = 'copyMove'
//火狐浏览器不加这句会没有拖动效果
e.dataTransfer.setData('text','1')
}, false)
//添加拖动结束事件
target.addEventListener('dragend', function(e){
console.log('拖拽结束')
console.log(e.dataTransfer)
aim[0].className = ''
})
//目标元素添加drop事件
aim[0].addEventListener('drop', function(e){
//防止浏览器打开新的窗口
e.preventDefault()
console.log('拖给我了！')
console.log(e)
aim[0].appendChild(target)
}, false)
</script>
</body>
</html>经过百度得知，想要出发drop事件，需要先给目标元素添加一个dragover事件并禁用默认操作，试了一下果然生效了！！加上这句的意思是允许放下元素，所以才会触发drop事件
aim[0].addEventListener('dragover', function(e){
e.preventDefault()
}, false)知识点总结
拖放事件的整个触发流程
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave (其中绿色标记出来的是被拖拽元素的事件，其他的事目标元素的事件)
