H5 --拖放

拖放：即抓取对象后拖到动另外一个位置，在HTML5中，拖放是HTML5标准的组成部分，任何元素都能够拖放

　　为了解决浏览器的兼容性，建议在拖放的文本类型的HTML元素上添加draggable="true" 属性

1.DragEvent接口

DragEvent接口是一个表示拖、放交互的DOM Event接口，事件类型包括：

（1）dragstart：在被拖拽对象开始被拖拽的时候触发：

HTMLElement.ondrag    = function(){
    ...
}

（2）drag：被拖拽对象在被拖拽的过程中触发：

HTMLElement.ondragstart = function(){
　　...
}

（3）dragend：被拖拽对象在被拖动结束以后（目标区域或者不在目标区域）触发：

HTMLElement.ondragend = function(){
    ...
}

（4）dragenter：目标对象在被拖动元素进入后触发：（只触发一次）

HTMLElement.ondragenter = function(){
    ...
}

（5）dragover：目标对象在被拖动元素上悬停时触发：

HTMLElement.ondragover = function(){
    ...
}

（6）dragleave：目标对象在被拖动对象离开时触发（只触发一次）

HTMLElement.ondragleave = function(){
    ...
}

（7）ondrop：被拖动对象在目标对象上释放时触发（目标函数是事件函数）：

HTMLElement.ondrop = function(){
　　event.preventDefault()
　　event.stopPropagation() 
    ...
}

注意：ondrop事件中一定要执行event.preventDefault() 和event.stopPropagation() ,否则被拖动对象（如链接对象）事件被解发

dataTransfer属性：

　　DragEvent对象的 dataTransfer 属性保存着拖拽操作中的数据（作为一个DataTransfer对象）：

variable = DragEvent.dataTransfer

DataTransfer对象

　　在进行拖放操作时，DataTransfer对象用于保存通过拖动动作，拖动到浏览器的数据，它可以保存一项     或多项数据，也可以保存一种或多种数据类型

　　Event.dataTransfer属性返回DataTransfer对象，而DataTransfer对象存在setData()方法

 1.方法

 （1）setData()

setData()方法用于为一个给定的类型设置数据，如果该类型不存在，它将添加到未尾;如果指定的类型    存在，则替换相同位置的现有数据：

// string DataTransfer.getData(类型)

　　Ele.ondragstart = function(event){

　　  event.dataTransfer.setData('text/plain',event.target.innerText)
　}

 （2）getData()

getData()方法用于根据拽定的类型检索数据，如果指定的类型不存在或者该 DataTransfer对象中没有该数据类型，将返回一个空字符串：

  // string DataTransfer.getData(类型)

　　var data = event.dataTransfer.getData('text/plain');

其实：所谓的数据类型其实就是一个变量名称 

常用的数据类型：

　　拖动文字时使用text/plain 类型

　　拖动链接时使用text/uri-list 类型

　　拖动HTML时使用text/html 类型

2. DataTransfer对象

(1) files属性

files 属性包含一个在数据传输上所有可用的本地文件列表，将返回FileList 对象：

dropRegionEle.addEventListener('drop',function(event){

　　//获取FileList对象(该对象既可能来源于<input type="file">标签,

   //也可能来源于用户的拖放操作)

　　//如果是来源于用户的拖放操作的话，需要通过Event.dataTransfer.files进行获取

　　event.preventDefault();

　　 event.stopPropagation();

　　 var files = event.dataTransfer.files;

　　console.log(files)
}

(2) FileList对象

　　FileList对象通常来自一个HTML的 选择文件 未选择任何文件元素，该类型的对象也可以来自于用户的拖放操作。

length属性：

　　length属性用于获取FileList对象中包含的文件数量，其语法结构是：

variable = FileList对象.length
（FileList对象）即上面的files

(3) File对象

　　File对象提供有关文件的信息，通常情况下，File对象来自用户在选择文件 未选择任何文件元素上选择的文件，也可以来自拖放操作生成的DataTransfer对象。

(4) FormData对象

　　FormData对象提供一种表示表单数据的键/值对的构造方式，经过它的数据可以使用XMLHttpRequest.send()方法发送到服务器。

创建FormData对象：

variable = new FormData() //想像成存在一个表单

 　　append()方法

　　append()方法用于添加一个新值到FormData对象内已存在的键名上，如果该键名不存在，则自动添加该键名：

FormData对象.append(name,value) //name,键名,value,键值

nodejs与文件拖拽需要用到Multer中间件：