从HTML5拖拽（一）我们得知：利用html5的dragable属性以及一些拖拽事件可以进行拖拽，但是无法获得所拖拽的数据。dataTransfer就应运而生，顾名思义，这是个传递数据的属性。
基础语法
dataTransfer 的api文档：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
dataTransfer的常用方法：
-
setData(format,data):设置拖拽元素的信息
- format：系统默认格式为： text/plain、text/html、text/xml、text/url-list（也可以自定义format，把format-data当key-value键值对使用）
- data：保存在拖拽元素中的数据
-
getData(format)：获取拖拽元素的信息
- format：和setData里的format遥相呼应，才能取到相应的值
clearData()：清除拖拽信息
dataTransfer的常用属性：
- effectAllowed：设置拖拽时应带有的样式类型
- dropEffect：设置拖拽元素被放下时的样式
- files：内含一系列文件信息，常用于将文件从桌面拖向浏览器
使用场景
情境1：从浏览器外把文件拖到投放区，并显示文件信息
- html
<!--投放区-->
<div id="section">drag files into here</div>
<!--信息表-->
<table border="1" id="msg">
<tr>
<td>文件名</td>
<td>文件大小</td>
<td>文件类型</td>
</tr>
</table>
- js
var msg = document.getElementById('msg');
var section = document.getElementById('section');
section.ondragover = function (event){
var e = event||window.event;
e.preventDefault();
//拖拽元素进入投放区时，鼠标样式变为move
e.dataTransfer.dropEffect = 'move';
};
section.ondrop = function(event){
var e = event||window.event;
e.preventDefault();
//拖拽元素进入投放区并投放时，显示文件样式
for(var i=0;i<e.dataTransfer.files.length;i++){
var file = e.dataTransfer.files[i];
//如果想知道file属性里边有什么有用的字段，可以console.log(e.dataTransfer.files[i])
var html = "<tr><td>"+file.name+"</td><td>"+file.size+"</td><td>"+file.type+"</td></tr>";
msg.innerHTML += html;
}
section.style.border = '1px solid #562356 ';
};
这样就完美的解决了文件拖拽的难题了，而且支持多文件拖拽。
情境2：拖动文字到投放区
- html
<!--拖拽对象-->
<div id="target">锄禾日当午，汗滴禾下土</div>
<!--投放区-->
<div id="section"></div>
- js
var section = document.getElementById('section');
var target = document.getElementById('target');
var index = 0；//拖拽次数
target.ondragstart = function (event){
var e = event||window.event;
index++;
e.dataTransfer.effectAllowed = 'move'; //此时样式已换成了move样式
e.dataTransfer.setData("num",index) ;//把拖拽的次数放进setData里边
};
section.ondragover = function (event){
var e = event||window.event;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
section.ondrop = function(event){
var e = event||window.event;
//获取系统自带的拖拽信息，如果不需要把样式也放进去， 可以把 text/html换成text/plain
var t = e.dataTransfer.getData('text/html');
var n = e.dataTransfer.getData('num');
section.innerHTML = t+"<br/>"+"拖拽的次数为："+n;
e.dataTransfer.clearData();//清除拖拽信息
};
