上一篇： «
下一篇： »

HTML5 Drag&Drop 、FileReader实例教程

　　上周六有幸同我们人人网的几个同事一起去Google总部参加了《给力HTML5 —— 2011 Google HTML5 训练营》，从下午1点多到晚上9点多8个小时左右的时间，收获还是很大的，8个小时的时间把以前一直想学或想做的事情都给搞了一些。好久没有写博客了，今天也该分享些给力的东西了，正好借此次机会跟大家分享些HTML5相关的给力的技术（sessionStorage、localStorage、Web SQL DateBase、Indexed DB、Canvas绘图、FileReader、Drag&Drop…），何止是给力，简直就是给力！

您还可以参考以下HTML5相关文章:
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

Google HTML5 训练营

先简单介绍一下这个训练营的活动流程：
　　　1:00 – 1:30 注册
　　　1:30 – 2:30 HTML5 技术剖析
　　　技术讲座1 —— Google 工程师
　　　技术讲座2 —— 特邀嘉宾（李靖威、李继成，就职于人人网）
　　　2:30 – 3:00 宣布竞赛规则，开始组队
　　　3:00 – 6:30 作品创作 / 提交
　　　6:30 – 7:00 作品展示
　　　7:00 – 7:30 评奖、颁奖

　　讲座部分，先是Google工程师寒蕊MM跟我们分享了些HTML5的新技术概况，其中大致包括：sessionStorage、localStorage、Web SQL DateBase 、Indexed DB，寒蕊MM还专门写了篇关于IndexedDB的文章《客户端数据存储》，文章用实例的方式讲了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

　　其中Web SQL Database虽是HTML5的技术，但由于某些原因，W3C组织(Web Applications Working Group)已不再维护这项技术，也就是说虽然目前Chrome、FireFox新版本浏览器支持这项技术，但不一定未来的版本还会支持。以下为w3c官网的声明：

Beware. This specification is no longer in active maintenance and the Web
Applications Working Group does not intend to maintain it further.

　　Indexed DataBase最初是由Oracle提出的数据库API，没记错的话起初叫做Simple DataBase，之后演变成Indexed DataBase，而且已被Chrome和FireFox(版本4)所支持。

　　这次活动规模比较小，由于人数限制在了30人，所以组队Coding阶段，每队5人，分成了6组~接下来就是短短3个小时左右的Coding了，我们人人网的四个人和另一位有Canvas经验的邱亮同学一起开发一个纯HTML5的可涂鸦日记本，其中有个插曲:一开始项目名字没多想就直接叫做《我的日记本》了，到最后提交项目的时候，Google MM说要起一个简洁且酷一些的名字，好吧，那我们就起一个简洁酷一些的名字，最后就叫《我日》！哇咔咔~让大家”贱笑”了~

html5-daily-book

　　言归正传，《我日》项目之所以叫纯HTML5，其实只是使用了些HTML5技术，在短短的3个小时时间，从功能到分工开发，时间很紧~所以只是做了个小小的Demo版，基本功能实现的差不多了，但愿以后还能有时间把它完善一下~其中使用了这些HTML5技术：

　　1.Web SQL DataBase ：存取日记数据
　　2.HTML5 Drag&Drop 事件 ：监听网页内图片拖拽及本地图片直接拖拽到日记中的事件
　　3.FileReader ：获取本地图片拖拽到日记本里的图片数据
　　4.Canvas ：实现日记涂鸦功能(画笔、调色、文字、图片绘制到画布等…)
　　5.HTML5新标签 ：如:<input type=”range”… /> 、 <section> 、<article>等…
　　6.CSS3

　　今天我只详细讲讲我的分工部分：HTML5 Drag & Drop 和 FireReader这两个东西，以后有机会在和大家分享其他技术。

HTML5 Drag & Drop 事件

　　过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好(不停地修改元素位置会导致页面reflow，除非绝对定位)，现在有了html5原生的Drag & Drop 拖拽事件，真的是方便了许多，用”事半功倍”来形容绝不为过。

Drag & Drop 包括以下事件：

  • dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素
  • dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素
  • dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素
  • dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素
  • dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素
  • drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素

完成一次成功页面内元素拖拽的行为事件过程应该是： dragstart –> dragenter –> dragover –> drop –> dragend

Drag & Drop 网页内的元素拖拽：

　　HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。

　　值得一提的是HTML5支持拖拽数据存储，使用dataTransfer接口，作用于元素的拖拽基础上，dataTransfer对象包含以下属性和方法：

  • dataTransfer.dropEffect [ = value ]：返回已选择的拖放效果，如果该操作效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含这几个值：“none”, “copy”, “link” 和 “move”。
  • dataTransfer.effectAllowed [ = value ]：返回允许执行的拖拽操作效果，可以设置修改，包含这些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
  • dataTransfer.types：返回在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回”files”
  • dataTransfer.clearData ( [ format ] )：删除指定格式的数据，如果未指定格式，则删除当前元素的所有携带数据
  • dataTransfer.setData(format, data)：为元素添加指定数据
  • dataTransfer.getData(format)：返回指定数据，如果数据不存在，则返回空字符串
  • dataTransfer.files：如果是拖拽文件，则返回正在拖拽的文件列表FileList
  • dataTransfer.setDragImage(element, x, y)：制定拖拽元素时跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标(据测试，Chrome暂不支持)
  • dataTransfer.addElement(element)：添加一起跟随拖拽的元素，如果你想让某个元素跟随被拖拽元素一同被拖拽，则使用此方法(据测试，Chrome暂不支持)

在dragstart事件触发时可以为被拖拽元素存储数据，就是使用上面说到的dataTransfer.setData，setData的数据格式一般有两种：”text/plain”(用于文本数据)和”text/uri-list”(用于url)，你可以先为某个可拖拽元素设置微数据，然后为它设置draggable属性为true，之后在其dragstart事件触发时存储数据：
html部分：

<div id="dragMe" builddate="2011-1-10" draggable="true">拖拽我！</div>
<div id="dropHere"></div>

javascript部分：

var oDragMe = document.getElementById('dragMe');

oDragMe.addEventListener('dragstart', function(e) {
　　e.dataTransfer.setData('text/plain', e.target.getAttribute('builddate'));
},false)

在拖拽结束的时候便可以获取相应元素的数据:

var oDropBox = document.getElementById('dropHere'),
　　tmpData;

oDropBox .addEventListener('drop', function(e) {
　　tmpData = e.dataTransfer.getData('text/plain');
},false)

创建拖拽事件监听的时候记得要把默认的行为事件去掉，毕竟浏览器是有默认拖拽行为的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不会被触发：

oDropBox .addEventListener('dragover', function(e) {
　　e.stopPropagation();
     e.preventDefault();
},false)

上面讲的这些基本上就能完成页面内元素的拖拽操作了，下面我们来说说从本地拖拽图片到页面元素中用到的技术：

FileReader获取本地拖拽文件

点击查看实例Demo

　　作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。

来看看FileReader支持的方法、属性和事件：

[Constructor]
interface FileReader {

  // 异步读取方法
  void readAsArrayBuffer(in Blob blob);
  void readAsBinaryString(in Blob blob);
  void readAsText(in Blob blob, [Optional] in DOMString encoding);
  void readAsDataURL(in Blob blob);

  void abort();

  // 状态
  const unsigned short EMPTY = 0;
  const unsigned short LOADING = 1;
  const unsigned short DONE = 2;
 
 
  readonly attribute unsigned short readyState;

  // 文件或二进制数据
  readonly attribute any result;
 
  readonly attribute FileError error;

  // 事件处理
  attribute Function onloadstart;
  attribute Function onprogress;
  attribute Function onload;
  attribute Function onabort;
  attribute Function onerror;
  attribute Function onloadend;

};
FileReader implements EventTarget;

今天只说说关于拖拽本地文件到页面的几个相关FileReader属性和事件：

  • readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
  • onload事件：当读取文件成功完成的时候触发此事件

在FileReader onload事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

//一定要在dragover事件中取消默认拖拽行为，不然drop事件会失效
oDropBox.addEventListener('dragover', function(e) {
      e.stopPropagation();
      e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
　　e.stopPropagation();
　　e.preventDefault();

　　var fileList  = e.dataTransfer.files,　　//获取拖拽文件
　　　　oImg = document.createElement('img'),
　　　　reader = new FileReader();

　　reader.onload = function(e) {
　　　　oImg.src = this.result;
　　　　oDropBox.appendChild(oImg);
　　}
　　reader.readAsDataURL(fileList[0]);　　//这里只取拖拽的第一个，实际中你可以遍历处理file列表
｝

OK，通过以上代码你就可以完成基本的本地图片拖拽到页面指定元素内的功能了。
点击查看实例Demo

《我日》Demo 预览

注意，以上demo仅可使用新版Chrome和FireFox查看，IE不支持。

好了，今天先讲这些，今后会更新更多HTML5相关的技术的，希望大家多多关注~

留意更新

订阅彬Go以查看HTML5最新资源、教程。

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/google-enjoy-html5-drag-drop-filereader.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作