2011-11-16 藍(lán)藍(lán)設(shè)計(jì)的小編
先簡(jiǎn)單介紹一下這個(gè)訓(xùn)練營(yíng)的活動(dòng)流程：
1:00 – 1:30 注冊(cè)
1:30 – 2:30 HTML5 技術(shù)剖析
技術(shù)講座1 —— Google 工程師
技術(shù)講座2 —— 特邀嘉賓（李靖威、李繼成，就職于人人網(wǎng)）
2:30 – 3:00 宣布競(jìng)賽規(guī)則，開始組隊(duì)
3:00 – 6:30 作品創(chuàng)作 / 提交
6:30 – 7:00 作品展示
7:00 – 7:30 評(píng)獎(jiǎng)、頒獎(jiǎng)
講座部分，先是Google工程師寒蕊MM跟我們分享了些HTML5的新技術(shù)概況，其中大致包括：sessionStorage 、localStorage 、Web SQL DateBase 、Indexed DB ，寒蕊MM還專門寫了篇關(guān)于IndexedDB的文章《客戶端數(shù)據(jù)存儲(chǔ)》 ，文章用實(shí)例的方式講了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。
其中Web SQL Database雖是HTML5的技術(shù)，但由于某些原因，W3C組織(Web Applications Working Group)已不再維護(hù)這項(xiàng)技術(shù)，也就是說(shuō)雖然目前Chrome、FireFox新版本瀏覽器支持這項(xiàng)技術(shù)，但不一定未來(lái)的版本還會(huì)支持。以下為w3c官網(wǎng)的聲明：
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提出的數(shù)據(jù)庫(kù)API，沒(méi)記錯(cuò)的話起初叫做Simple DataBase，之后演變成Indexed DataBase，而且已被Chrome和FireFox(版本4)所支持。
這次活動(dòng)規(guī)模比較小，由于人數(shù)限制在了30人，所以組隊(duì)Coding階段，每隊(duì)5人，分成了6組~接下來(lái)就是短短3個(gè)小時(shí)左右的Coding了，我們?nèi)巳司W(wǎng)的四個(gè)人和另一位有Canvas經(jīng)驗(yàn)的邱亮同學(xué)一起開發(fā)一個(gè)純HTML5的可涂鴉日記本，其中有個(gè)插曲:一開始項(xiàng)目名字沒(méi)多想就直接叫做《我的日記本》了，到最后提交項(xiàng)目的時(shí)候，Google MM說(shuō)要起一個(gè)簡(jiǎn)潔且酷一些的名字，好吧，那我們就起一個(gè)簡(jiǎn)潔酷一些的名字，最后就叫《我日》！哇咔咔~讓大家”賤笑”了~
言歸正傳，《我日》項(xiàng)目之所以叫純HTML5，其實(shí)只是使用了些HTML5技術(shù)，在短短的3個(gè)小時(shí)時(shí)間，從功能到分工開發(fā)，時(shí)間很緊~所以只是做了個(gè)小小的Demo版，基本功能實(shí)現(xiàn)的差不多了，但愿以后還能有時(shí)間把它完善一下~其中使用了這些HTML5技術(shù)：
1.Web SQL DataBase ：存取日記數(shù)據(jù)
2.HTML5 Drag&Drop 事件 ：監(jiān)聽網(wǎng)頁(yè)內(nèi)圖片拖拽及本地圖片直接拖拽到日記中的事件
3.FileReader ：獲取本地圖片拖拽到日記本里的圖片數(shù)據(jù)
4.Canvas
：實(shí)現(xiàn)日記涂鴉功能(畫筆、調(diào)色、文字、圖片繪制到畫布等…)
5.HTML5新標(biāo)簽 ：如:<input type=”range”… /> 、 <section> 、<article>等…
6.CSS3
今天我只詳細(xì)講講我的分工部分：HTML5 Drag & Drop 和 FireReader這兩個(gè)東西，以后有機(jī)會(huì)在和大家分享其他技術(shù)。
過(guò)去我們想實(shí)現(xiàn)網(wǎng)頁(yè)中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監(jiān)聽來(lái)模擬拖拽效果，為了實(shí)現(xiàn)實(shí)時(shí)的拖拽移動(dòng)效果，還要不停地獲取鼠標(biāo)的坐標(biāo)，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會(huì)導(dǎo)致頁(yè)面reflow，除非絕對(duì)定位)，現(xiàn)在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來(lái)形容絕不為過(guò)。
Drag & Drop 包括以下事件 ：
完成一次成功頁(yè)面內(nèi)元素拖拽的行為事件過(guò)程應(yīng)該是： dragstart –> dragenter –> dragover –> drop –> dragend
HTML5為元素新增了用于拖拽的屬性draggable ，這個(gè)屬性決定了元素是否能被拖拽，如果draggable=”true”，則元素可被拖拽，否則只能選擇元素的文本。
值得一提的是HTML5支持拖拽數(shù)據(jù)存儲(chǔ)，使用dataTransfer 接口，作用于元素的拖拽基礎(chǔ)上，dataTransfer對(duì)象包含以下屬性和方法：
在dragstart事件觸發(fā)時(shí)可以為被拖拽元素存儲(chǔ)數(shù)據(jù)，就是使用上面說(shuō)到的dataTransfer.setData
，setData的數(shù)據(jù)格式一般有兩種：”text/plain”(用于文本數(shù)據(jù))和”text/uri-list”(用于url)，你可以先為某個(gè)可拖拽元素設(shè)置微數(shù)據(jù)，然后為它設(shè)置draggable屬性為true，之后在其dragstart事件觸發(fā)時(shí)存儲(chǔ)數(shù)據(jù)：
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 ) |
在拖拽結(jié)束的時(shí)候便可以獲取相應(yīng)元素的數(shù)據(jù):
1
2 3 4 5 6 |
var
oDropBox =
document.getElementById
(
'dropHere'
)
,
tmpData; oDropBox .addEventListener ( 'drop' , function ( e) { tmpData = e.dataTransfer .getData ( 'text/plain' ) ; } , false ) |
創(chuàng)建拖拽事件監(jiān)聽的時(shí)候記得要把默認(rèn)的行為事件去掉，畢竟瀏覽器是有默認(rèn)拖拽行為的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不會(huì)被觸發(fā)：
1
2 3 4 |
oDropBox .addEventListener
(
'dragover'
,
function
(
e)
{
e.stopPropagation ( ) ; e.preventDefault ( ) ; } , false ) |
上面講的這些基本上就能完成頁(yè)面內(nèi)元素的拖拽操作了，下面我們來(lái)說(shuō)說(shuō)從本地拖拽圖片到頁(yè)面元素中用到的技術(shù)：
作為 File API 的一部分，FileReader 專門用于讀取文件，根據(jù) W3C 的定義，F(xiàn)ileReader 接口 “提供一些讀取文件的方法與一個(gè)包含讀取結(jié)果的事件模型”。
來(lái)看看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( ) ; // 狀態(tài) const unsigned short EMPTY = 0 ; const unsigned short LOADING = 1 ; const unsigned short DONE = 2 ; readonly attribute unsigned short readyState; // 文件或二進(jìn)制數(shù)據(jù) 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; |
今天只說(shuō)說(shuō)關(guān)于拖拽本地文件到頁(yè)面的幾個(gè)相關(guān)FileReader屬性和事件：
在FileReader onload事件觸發(fā)后，你可以通過(guò)this.result 來(lái)獲取讀取的文件數(shù)據(jù)，如果是圖片，將返回base64格式的圖片數(shù)據(jù)。
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//一定要在dragover事件中取消默認(rèn)拖拽行為，不然drop事件會(huì)失效
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 ] ) ; //這里只取拖拽的第一個(gè)，實(shí)際中你可以遍歷處理file列表 ｝ |
OK，通過(guò)以上代碼你就可以完成基本的本地圖片拖拽到頁(yè)面指定元素內(nèi)的功能了。
點(diǎn)擊查看實(shí)例Demo
注意，以上demo僅可使用新版Chrome和FireFox查看，IE不支持。
好了，今天先講這些，今后會(huì)更新更多HTML5 相關(guān)的技術(shù)的，希望大家多多關(guān)注~
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.91whvog3.cn