Google HTML5 訓練營

2011-11-16    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   sillybuy.com  )是一家專注而深入的設(shè)計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計  、 cs界面設(shè)計  、 ipad界面設(shè)計  、 包裝設(shè)計  、 圖標定制  、 用戶體驗  、交互設(shè)計、   網(wǎng)站建設(shè)  、平面設(shè)計服務(wù) Google HTML5 訓練營

先簡單介紹一下這個訓練營的活動流程：
　　　1:00 – 1:30 注冊
　　　1:30 – 2:30 HTML5 技術(shù)剖析
　　　技術(shù)講座1 —— Google 工程師
　　　技術(shù)講座2 —— 特邀嘉賓（李靖威、李繼成，就職于人人網(wǎng)）
　　　2:30 – 3:00 宣布競賽規(guī)則，開始組隊
　　　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ù)存儲》 ，文章用實例的方式講了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

　　其中Web SQL Database雖是HTML5的技術(shù)，但由于某些原因，W3C組織(Web Applications Working Group)已不再維護這項技術(shù)，也就是說雖然目前Chrome、FireFox新版本瀏覽器支持這項技術(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人，所以組隊Coding階段，每隊5人，分成了6組~接下來就是短短3個小時左右的Coding了，我們?nèi)巳司W(wǎng)的四個人和另一位有Canvas經(jīng)驗的邱亮同學一起開發(fā)一個純HTML5的可涂鴉日記本，其中有個插曲:一開始項目名字沒多想就直接叫做《我的日記本》了，到最后提交項目的時候，Google MM說要起一個簡潔且酷一些的名字，好吧，那我們就起一個簡潔酷一些的名字，最后就叫《我日》！哇咔咔~讓大家”賤笑”了~

html5-daily-book

　　言歸正傳，《我日》項目之所以叫純HTML5，其實只是使用了些HTML5技術(shù)，在短短的3個小時時間，從功能到分工開發(fā)，時間很緊~所以只是做了個小小的Demo版，基本功能實現(xiàn)的差不多了，但愿以后還能有時間把它完善一下~其中使用了這些HTML5技術(shù)：

　　1.Web SQL DataBase ：存取日記數(shù)據(jù)
　　2.HTML5 Drag&Drop 事件 ：監(jiān)聽網(wǎng)頁內(nèi)圖片拖拽及本地圖片直接拖拽到日記中的事件
　　3.FileReader ：獲取本地圖片拖拽到日記本里的圖片數(shù)據(jù)
　　4.Canvas ：實現(xiàn)日記涂鴉功能(畫筆、調(diào)色、文字、圖片繪制到畫布等…)
　　5.HTML5新標簽 ：如:<input type=”range”… /> 、 <section> 、<article>等…
　　6.CSS3

　　今天我只詳細講講我的分工部分：HTML5 Drag & Drop 和 FireReader這兩個東西，以后有機會在和大家分享其他技術(shù)。

HTML5 Drag & Drop 事件

　　過去我們想實現(xiàn)網(wǎng)頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監(jiān)聽來模擬拖拽效果，為了實現(xiàn)實時的拖拽移動效果，還要不停地獲取鼠標的坐標，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會導致頁面reflow，除非絕對定位)，現(xiàn)在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來形容絕不為過。

Drag & Drop 包括以下事件 ：

  • dragstart ：要被拖拽的元素開始拖拽時觸發(fā)，這個事件對象是被拖拽元素
  • dragenter ：拖拽元素進入目標元素時觸發(fā)，這個事件對象是目標元素
  • dragover ：拖拽某元素在目標元素上移動時觸發(fā)，這個事件對象是目標元素
  • dragleave ：拖拽某元素離開目標元素時觸發(fā)，這個事件對象是目標元素
  • dragend ：在drop之后觸發(fā)，就是拖拽完畢時觸發(fā)，這個事件對象是被拖拽元素
  • drop ：將被拖拽元素放在目標元素內(nèi)時觸發(fā)，這個事件對象是目標元素

完成一次成功頁面內(nèi)元素拖拽的行為事件過程應(yīng)該是： dragstart –> dragenter –> dragover –> drop –> dragend

Drag & Drop 網(wǎng)頁內(nèi)的元素拖拽：

　　HTML5為元素新增了用于拖拽的屬性draggable ，這個屬性決定了元素是否能被拖拽，如果draggable=”true”，則元素可被拖拽，否則只能選擇元素的文本。

　　值得一提的是HTML5支持拖拽數(shù)據(jù)存儲，使用dataTransfer 接口，作用于元素的拖拽基礎(chǔ)上，dataTransfer對象包含以下屬性和方法：

  • dataTransfer.dropEffect [ = value ] ：返回已選擇的拖放效果，如果該操作效果與起初設(shè)置的effectAllowed效果不符，則拖拽操作失敗。可以設(shè)置修改，包含這幾個值：“none”, “copy”, “link” 和 “move” 。
  • dataTransfer.effectAllowed [ = value ] ：返回允許執(zhí)行的拖拽操作效果，可以設(shè)置修改，包含這些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
  • dataTransfer.types ：返回在dragstart事件出發(fā)時為元素存儲數(shù)據(jù)的格式，如果是外部文件的拖拽，則返回”files”
  • dataTransfer.clearData ( [ format ] ) ：刪除指定格式的數(shù)據(jù)，如果未指定格式，則刪除當前元素的所有攜帶數(shù)據(jù)
  • dataTransfer.setData(format, data) ：為元素添加指定數(shù)據(jù)
  • dataTransfer.getData(format) ：返回指定數(shù)據(jù)，如果數(shù)據(jù)不存在，則返回空字符串
  • dataTransfer.files ：如果是拖拽文件，則返回正在拖拽的文件列表FileList
  • dataTransfer.setDragImage(element, x, y) ：制定拖拽元素時跟隨鼠標移動的圖片，x、y分別是相對于鼠標的坐標(據(jù)測試，Chrome暫不支持)
  • dataTransfer.addElement(element) ：添加一起跟隨拖拽的元素，如果你想讓某個元素跟隨被拖拽元素一同被拖拽，則使用此方法(據(jù)測試，Chrome暫不支持)

在dragstart事件觸發(fā)時可以為被拖拽元素存儲數(shù)據(jù)，就是使用上面說到的dataTransfer.setData ，setData的數(shù)據(jù)格式一般有兩種：”text/plain”(用于文本數(shù)據(jù))和”text/uri-list”(用于url)，你可以先為某個可拖拽元素設(shè)置微數(shù)據(jù)，然后為它設(shè)置draggable屬性為true，之后在其dragstart事件觸發(fā)時存儲數(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é)束的時候便可以獲取相應(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)聽的時候記得要把默認的行為事件去掉，畢竟瀏覽器是有默認拖拽行為的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不會被觸發(fā)：



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

上面講的這些基本上就能完成頁面內(nèi)元素的拖拽操作了，下面我們來說說從本地拖拽圖片到頁面元素中用到的技術(shù)：

FileReader獲取本地拖拽文件

點擊查看實例Demo

　　作為 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;

  // 文件或二進制數(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屬性和事件：

  • readAsDataURL方法 ：參數(shù)為要讀取的文件對象，將文件讀取為DataUrl
  • onload事件 ：當讀取文件成功完成的時候觸發(fā)此事件

在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事件中取消默認拖拽行為，不然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，通過以上代碼你就可以完成基本的本地圖片拖拽到頁面指定元素內(nèi)的功能了。
點擊查看實例Demo

《我日》Demo 預(yù)覽

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

好了，今天先講這些，今后會更新更多HTML5 相關(guān)的技術(shù)的，希望大家多多關(guān)注~

分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔