拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为HTML5的拖放事件对两者是不同的。
被拖动的源对象可以触发的事件：
1).ondragstart:源对象开始被拖动
2).ondrag:源对象被拖动过程中（鼠标可能移动也可能不移动）
3).ondragend:源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
1).ondragenter:目标对象被源对象拖动着进入
2).ondragover:目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
注意：1.必须阻止dragover事件的默认行为e.preventDefault，才可能触发drop事件！
box.ondragover = function(e){
e.preventDefault(); //使得drop事件可以触发
}
box.ondrop = function(e){
do something...
}
2.要使用jQuery的话，一定要记住e不是原始的event事件，而是jQuery的事件，这时候需要使用e.originalEvent.dataTransfer
拓展：HTML5新增的文件操作对象
File：代表一个文件对象|”
FileList:代表一个文件列表对象，类数组
FileReader:从文件中读取数据
FileWriter：向文件中写入数据
有了文件操作对象，可以直接拖动客户端文件到服务器下载的页面中。
div.ondrop=function(e){
var f=e.dataTransfer.files[0];//文件对象 File
varfr=new FileReader();//从文件对象中读取数据
fr.readAsDataURL(f);//从文件中读取URL数据
fr.onload=function(){
img.src=fr.result;
}
}
完整代码如下：
//例：用户拖动图片到服务器上
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
border: 1px solid #aaa;
border-radius: 3px;
padding: 10px;
margin: 10px;
min-height: 400px;
}
</style>
</head>
<body>
<h1>拖放API的扩展知识</h1>
<h3>请拖动您的照片到下方方框区域</h3>
<div id="container">
</div>
<script>
//监听document的drop事件——取消其默认行为：在新窗口中打开图片
document.ondragover = function(e){
e.preventDefault(); //使得drop事件可以触发
}
document.ondrop = function(e){
e.preventDefault(); //阻止在新窗口中打开图片
}
//监听div#container的drop事件，设法读取到释放的图片数据，显示出来
container.ondragover = function(e){
e.preventDefault();
}
container.ondrop = function(e){
console.log('客户端拖动着一张图片释放了...')
//当前的目标对象读取拖放源对象存储的数据
//console.log(e.dataTransfer); //显示有问题
//console.log(e.dataTransfer.files.length); //拖进来的图片的数量
var f0 = e.dataTransfer.files[0];
//console.log(f0); //文件对象 File
//从文件对象中读取数据
var fr = new FileReader();
//fr.readAsText(f0); //从文件中读取文本字符串
fr.readAsDataURL(f0); //从文件中读取URL数据
fr.onload = function(){
console.log('读取文件完成')
console.log(fr.result);
varimg = new Image();
img.src = fr.result; //URL数据
container.appendChild(img);
}
}
</script>
</body>
</html>
drag