2011-11-16 藍藍設計的小編
先簡單介紹一下這個訓練營的活動流程：
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，其實只是使用了些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這兩個東西，以后有機會在和大家分享其他技術。
過去我們想實現網頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監聽來模擬拖拽效果，為了實現實時的拖拽移動效果，還要不停地獲取鼠標的坐標，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會導致頁面reflow，除非絕對定位)，現在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來形容絕不為過。
Drag & Drop 包括以下事件 ：
完成一次成功頁面內元素拖拽的行為事件過程應該是： dragstart –> dragenter –> dragover –> drop –> dragend
HTML5為元素新增了用于拖拽的屬性draggable ，這個屬性決定了元素是否能被拖拽，如果draggable=”true”，則元素可被拖拽，否則只能選擇元素的文本。
值得一提的是HTML5支持拖拽數據存儲，使用dataTransfer 接口，作用于元素的拖拽基礎上，dataTransfer對象包含以下屬性和方法：
在dragstart事件觸發時可以為被拖拽元素存儲數據，就是使用上面說到的dataTransfer.setData
，setData的數據格式一般有兩種：”text/plain”(用于文本數據)和”text/uri-list”(用于url)，你可以先為某個可拖拽元素設置微數據，然后為它設置draggable屬性為true，之后在其dragstart事件觸發時存儲數據：
html部分：
1
2 |
<div
id
=
"dragMe"
builddate=
"2011-1-10"
draggable=
"true"
>
拖拽我！</
div
>
<div id = "dropHere" ></ div > |
javascript部分：
1
2 3 4 5 |
var
oDragMe =
document.getElementById
(
'dragMe'
)
;
oDragMe.addEventListener ( 'dragstart' , function ( e) { e.dataTransfer .setData ( 'text/plain' , e.target .getAttribute ( 'builddate' ) ) ; } , false ) |
在拖拽結束的時候便可以獲取相應元素的數據:
1
2 3 4 5 6 |
var
oDropBox =
document.getElementById
(
'dropHere'
)
,
tmpData; oDropBox .addEventListener ( 'drop' , function ( e) { tmpData = e.dataTransfer .getData ( 'text/plain' ) ; } , false ) |
創建拖拽事件監聽的時候記得要把默認的行為事件去掉，畢竟瀏覽器是有默認拖拽行為的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不會被觸發：
1
2 3 4 |
oDropBox .addEventListener
(
'dragover'
,
function
(
e)
{
e.stopPropagation ( ) ; e.preventDefault ( ) ; } , false ) |
上面講的這些基本上就能完成頁面內元素的拖拽操作了，下面我們來說說從本地拖拽圖片到頁面元素中用到的技術：
作為 File API 的一部分，FileReader 專門用于讀取文件，根據 W3C 的定義，FileReader 接口 “提供一些讀取文件的方法與一個包含讀取結果的事件模型”。
來看看FileReader支持的方法、屬性和事件：
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
[
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屬性和事件：
在FileReader onload事件觸發后，你可以通過this.result 來獲取讀取的文件數據，如果是圖片，將返回base64格式的圖片數據。
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//一定要在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僅可使用新版Chrome和FireFox查看，IE不支持。
好了，今天先講這些，今后會更新更多HTML5 相關的技術的，希望大家多多關注~