原生的 HTML 5 拖拽与JavaScript File API

W3C中关于H5拖拽(拖放)的介绍

拖放（Drag 和 drop）是 HTML5 标准的组成部分

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

拖拽的API

1. 实现拖拽效果

   源元素 - 要拖拽的文件     
   目标元素 - 要拖拽到哪里去
   

2. 目前实现拖拽效果

   使用原生DOM就能实现 - 最麻烦     
   使用jQuery的插件
   

3. HTML5拖拽

• 源元素事件

       dragstart - 当鼠标开始拖放时被触发
       drag - 当鼠标拖放过程中被触发
       dragend 当鼠标拖放结束时被触发
  

• 目标元素事件

       dragover - 当鼠标到达目标元素被触发，会反复触发
       dragenter - 当鼠标拖放进入到目标元素内触发
       dragleave - 当鼠标离开目标元素时触发
       drop - 当鼠标实现拖放效果时被触发
  

• 问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为

      解决：在dragover的事件中阻止默认行为即可event.preventDefault();         
  

• 时间关系：

       dragstart

下面的例子是W3School 提供的一个简单的拖放实例：
实例

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目标元素）中

你可以自己去尝试下

由于浏览器默认元素不可拖拽，因此我们需要给要拖拽的元素设置 draggables属性(注意两个有字母 g 哦)

下面是博主拖拽的一些练习

  
  
  
  
  
  
  


    
竖排显示小组的成员，可以拖动改变位置

        
实现插入效果
        

            
北极熊
            
帝企鹅
            
海鸥
            
候鸟
            
海豚
        
        
    
        
交换效果,有bug
        

            
广东
            
北京
            
上海
            
南昌
            
武汉
        
    

dataTransfer对象

• 作用：类似于window系统的剪切板功能

• 功能：可以将源元素的信息，存储在这里，提供给目标元素

• 使用：

  使用事件对象获取到dataTransfer对象

    var trans = event.dataTransfer;
  

  设置数据

    setData(type,data)方法
  
    type:类型，特指标识(id)，一般为字符串
    data:设置的数据内容
  

  获取数据

    getData(type);
  

  清除数据

    clearData(type) 
  
     所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除事件对象 - 作为事件处理函数的参数存在
  
    DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准
  

JavaScript File API

使用 JavaScript File API 实现从本地拖拽一个图片到页面中

var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件读取对象
var reader = new FileReader();
//读取文件
reader.readAsDataURL(file);   
//读取完以后加载
reader.onload = function(){    
  d1.innerHTML = "";
}    

JavaScript File API的使用我就不做说明了(因为人家写的相当详细)

下面的网址是 IBM 上关于JavaScript File API的一个详细介绍

http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/index.html?ca=drs-

其中的getAsDataURL函数返回一个形如 data: 的 URL，这个URL包含了所涉及到的内容的编码形式。

注： getAsDataURL() 方法已经废弃，你应该使用 FileReader 对象中的readAsDataURL() 方法作为替代。

readAsDataURL()的使用：
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

不过使用 readAsDataURL()得到的 reader.result 的返回值 data 太长了 →_→