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://91whvog3.cn