1. 创建拖拽对象
①给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；false：元素不能被拖拽；auto：
浏览器自己判断元素是否能被拖拽。
2. 处理拖拽事件
① 当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发。
3. 创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发；
B.dragover：拖拽对象在投放区内移动时触发；
C.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover、dragleave可能会受到默认事件的影响，所以我们在事件当中使用e.preventDefault();来阻止事件默认事件。
4. 使用dataTransfer传递数据
1.当我们需要拖拽对象向投放区传递数据的时候用到
dataTransfer有下面的属性和方法：
1.types：返回数据的格式；
2.getData(<format>)：返回指定格式数据；
3.setData(<format>, <data>)：设置指定格式数据；
4.clearData(<format>)：移除指定格式数据；
5.files：返回已经投放的文件的信息数组。
1.type：文件类型
2.size:文件大小
3.name:文件名
1.异步ajax
var xml=new XMLHttpRequest();
xml.open("post","1.php");
xml.send(formData);
2.表单数据
var formData=new FormData();
formData.append("aa",DataTransferObj);
例子：
<!DOCTYPE HTML>
<html>
<head>
<style>
#box{
150px;height:150px;border:1px dashed red;
font-size:13px;line-height:150px;text-align:center;
}
</style>
<script>
window.onload=function () {
var box=document.getElementById("box");
box.ondragenter=function (e) {
e.preventDefault()
}
box.ondragover=function (e) {
box.innerHTML="请松开"
e.preventDefault()
}
box.ondragleave=function (e) {
box.innerHTML="请拖入上传的文件"
e.preventDefault()
}
box.ondrop=function (e) {
var file=e.dataTransfer.files[0];
var formData=new FormData();
formData.append("aa",file);
var xml=new XMLHttpRequest();
xml.open("post","up.php");
xml.send(formData);
e.preventDefault()
}
}
</script>
</head>
<body>
<div id="box">
请拖入上传的文件
</div>
</body>
</html>