拖拽：
HTML5 拖拽操作中，首先要明确拖拽元素和目标元素；
- 拖拽元素，页面中设置了draggable="true"属性的元素
- 页面中任何一个元素都有可能成为目标元素
应用于拖拽元素的事件监听：
- ondrag 整个拖拽的过程都会调用
- ondragstart 当拖拽开始的时候调用
- ondragleave 当鼠标离开拖拽元素的时候调用
- ondragend 当拖拽结束的时候调用
应用于目标元素的事件监听：
- ondragenter 当拖拽元素进入时调用
- ondragover 当停留在目标元素上调用
- ondrop 当目标元素松开鼠标时调用
- ondragleave 当鼠标离开目标元素的时候调用
draggable 属性
- true（可拖拽）
- false（不可拖拽）
- none（随浏览器处理）
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style>
#tuozhuai{
width: 200px;
height: 200px;
background-color: #0077AA;
}
#mubiao{
margin-top: 40px;
width: 400px;
height: 400px;
background-color: #55A532;
}
</style>
</head>
<body>
<div id="tuozhuai" draggable="true"></div>
<div id="mubiao"></div>
</body>
</html>
<script type="text/jscript">
var tuozhuai=document.querySelector('#tuozhuai');
var mubiao=document.querySelector('#mubiao');
// 对拖拽元素进行的的操作
// ***********************dragstart只触发一次*******************************
tuozhuai.addEventListener('dragstart',function(){
console.log(1);
});
// ***********************drag拖拽过程中一直触发*************************************
tuozhuai.addEventListener('drag',function(){
console.log(2);
});
// ***********************dragleave只触发一次*************************************
tuozhuai.addEventListener('dragleave',function(){
console.log(3);
this.style.backgroundColor="red";
});
// ***********************dragend只触发一次*************************************
tuozhuai.addEventListener('dragend',function(){
console.log(4);
});
// 对拖拽目标进行操作
// ************************gragenter进入目标元素的时候触发一次**************************************************
mubiao.addEventListener("dragenter",function(){
console.log(10);
this.style.backgroundColor="red";
})
// ************************gragover一直触发**************************************************
mubiao.addEventListener("dragover",function(){
console.log(11);
this.style.backgroundColor="blue";
})
// ************************drop当在目标元素松开鼠标触发，当没有触发的原因可能是**************************************************
// 要可以触发，得把dragover的给去掉，，给上边dragover方法添加e.preventDefault();
// mubiao.addEventListener("drop",function(){
// console.log(12);
// })
</script>
