html5拖拽换位效果演示,HTML5拖拽（二）--dataTransfer

从HTML5拖拽(一)我们得知：利用html5的dragable属性以及一些拖拽事件可以进行拖拽，但是无法获得所拖拽的数据。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

drag files into here

文件名

文件大小

文件类型

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

var file = e.dataTransfer.files[i];

//如果想知道file属性里边有什么有用的字段，可以console.log(e.dataTransfer.files[i])

var html = "

"+file.name+""+file.size+""+file.type+"";

msg.innerHTML += html;

}

section.style.border = '1px solid #562356 ';

};

这样就完美的解决了文件拖拽的难题了，而且支持多文件拖拽。

情境2：拖动文字到投放区

html

锄禾日当午，汗滴禾下土

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+"
"+"拖拽的次数为："+n;

e.dataTransfer.clearData();//清除拖拽信息

};