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