DataTransfer对象：退拽传递的对象，一般使用Event.dataTransfer。
专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业江阳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
2
draggable属性，标签元素设置值为true。drangable=true。
3
ondragstart事件:元素被拖拽的时候触发的事件，作用在被拖拽元素上。
ondragenter事件:进入目标元素触发事件，作用在目标元素上。
ondragover事件:拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上。
ondrop事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上。
ondragend事件:拖拽完成后触发事件，作用在被拖拽元素上。
Event.preventDefault()方法:阻止默认方法执行。ondragover中一定要执行preventDefault(),否则ondrop事件不会被 触发。
Event.effectAllowed属性:拖拽的效果。
设置元素为可拖放，draggable属性设置为true。img draggable="true"
拖动元素 使用ondragstart事件。setData()设置获取元素。
dataTransfer.setData()方法设置被拖数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
drag(event)声明方法，规定被拖动的数据，类型是"text",值是可拖动元素id获取。
拖拽放入目标 ondragover，ondragover事件规定在何处放置被拖拽的数据。
一定要定义event.preventDefault(),来阻止默认动作。
进行放置 ondrop 当放置被拖数据时，会发生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片！");
return false;
}
//拖拉图片到浏览器，可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize500){
alert("上传大小不能超过500K.");
return false;
}
var str = "img src='"+img+"'p图片名称："+filename+"/pp大小："+filesize+"KB/p";
$("#preview").html(str);
//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。
注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
举例：
定义可拖放内容
div id="columns"
div class="column" draggable="true"headerA/header/div
div class="column" draggable="true"headerB/header/div
div class="column" draggable="true"headerC/header/div
/div
2、监听拖动事件
可附加大量不同事件以监听整个拖放过程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.这里是开始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4'; // this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
拖拽发生过程
被拖拽元素
dragstart 按下鼠标键并开始移动鼠标时
drag 在dragstart事件之后，在元素被拖动期间会持续触发该事件
dragend 当拖动停止时，会触发dragend事件
放置目标元素
dragenter 有元素被拖动到放置目标上
dragover 紧随dragenter发生，在被拖动的元素
还在放置目标范围内移动时，会持续触发该事件
dragleave 在元素被拖出放置目标时触发
drop 元素被放到了放置目标中触发
注释：拖拽发生过程：dragstart-drag-dragenter-dragover-dragleave/drop-dragend
给drop事件加
ev.stopPropagation(); //阻止冒泡
ev.preventDefault(); //阻止默认行为