拖拽：從 Dojo 到 HTML 5
Dojo 及 HTML 5 簡介
Dojo 是目前***的開源 JavaScript 工具庫之一，很多開發(fā)者以及企業(yè)用戶都把Dojo 作為***的 JavaScript 工具。Dojo 為 Web 應(yīng)用的開發(fā)提供了大量的客戶端組件，能夠讓你可以方便的進行 HTML DOM 操作、拖拽、AJAX 調(diào)用、定制可視化控件等來使得你的 Web 應(yīng)用變成富網(wǎng)絡(luò)應(yīng)用 (RIA)。而且 Dojo 在性能、可訪問性、多語言支持以及文檔方面都做的非常出色，這也是企業(yè)選擇 Dojo 的原因之一。
51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解
HTML 5 是***一代的 HTML，它將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)， HTML 5 是 W3C 與 WHATWG 合作的結(jié)果，目前仍外于開發(fā)中 ; 自從上一代 HTML4，Web 世界已經(jīng)發(fā)生了巨大的變化，HTML 5 的到來將更大的促進 Web 的發(fā)展，HTML 5 提供了很多新的功能，主要有：
◆新的 HTML 元素，例如 section, nav, header, footer, article 等
◆用于繪畫的 Canvas 元素
◆用于多媒體播放的 video 和 audio 元素
◆用于定位的 Geolocation API
◆本地存儲以及離線應(yīng)用
◆Web Workers
◆拖拽 API
◆文件 API
我們主要對 HTML 5 的拖拽功能進行講解，并結(jié)合文件 API 與桌面進行交互。來與 Dojo 的 dnd 拖拽組件進行比較。
使用 Dojo 創(chuàng)建及定制拖拽應(yīng)用
類似 Dojo 其他組件，拖拽的實現(xiàn)有兩種方式：聲明式和編程式。在這里我們使用聲明式的方式做簡要的介紹。
在 Dojo 拖拽實現(xiàn)中，有兩個重要的元素 dojo.dnd.Source 和 dojo.dnd.Target。這兩個元素分別標(biāo)示了拖拽中的源容器 Source 和目標(biāo)容器 Target。值得注意的是源容器 Source 默認也是目標(biāo)容器 Target，而不需要作目標(biāo)容器 Target 的聲明。我們在源容器 Source 中創(chuàng)建一些可以拖動的元素，要讓這些元素可拖動，我們要為這些元素添加 class 屬性值 DojoDndItem。下面的示例代碼定義了一個源容器 Source 以及一些可以拖動的元素。在這些可以拖動的元素中我們可以定義它們的拖拽類型 dndType。dndType 的值開發(fā)者可以自己定義，而目標(biāo)容器 Target 元素的 accept 屬性定義了該目標(biāo)容器接受的拖拽類型。
清單 1. 創(chuàng)建拖拽的源容器和可拖拽的元素
- <div id="source" style="height:400px;" dojoType="dojo.dnd.Source">
- <div id="item1" class="dojoDndItem item" dndType="divItem">item1</div>
- <img src="w3c.jpg" class="dojoDndItem item" dndType="imageItem"></img>
- <a href="http://www.w3.org/TR/html5/" class="dojoDndItem item" dndType="linkItem">
- HTML5 specification</a>
- </div>
對于 Target 我們可以創(chuàng)建一個 div，然后加上屬性 dojoType=”dojo.dnd.Target”和屬性 accept。不在 accept 中的類型的 dojoDndItem 元素將不被這個容器接受。例如清單 2 中的目標(biāo)容器只接受 divItem 和 imageItem 這兩種類型，那么清單 1 中的 linkItem 將不能被拖到這個目標(biāo)容器中。
清單 2. 創(chuàng)建拖拽的目標(biāo)容器和可接受的類型
- <div id="target" style="height:400px;" dojoType="dojo.dnd.Target"
- accept="divItem, imageItem">
真正 Web 應(yīng)用的拖拽沒有這么簡單，開發(fā)者往往需要在拖拽的過程中更多的介入。這時候可以通過對 Dojo 提供的 dojo.dnd.Source 和 dojo.dnd.Target 進行繼承擴展，開發(fā)滿足業(yè)務(wù)需要的功能和特性。這里將不贅述。
使用 HTML 5 創(chuàng)建拖拽應(yīng)用
在這一章中，我們將要使用 HTML 5 創(chuàng)建一個簡單的拖拽應(yīng)用，如圖 1 所示，用戶可以把網(wǎng)頁上內(nèi)容從左邊的區(qū)域拖放到右邊的區(qū)域。這個應(yīng)用程序的代碼可到附件中可以下載。
圖 1. HTML 5 拖拽應(yīng)用效果圖
#p#
創(chuàng)建可以拖動的節(jié)點
使用 HTML 5 創(chuàng)建拖拽只需要對可拖拽的節(jié)點進行聲明——給可以拖拽的節(jié)點添加 draggable 屬性并設(shè)值為 true。如清單 3 中的 div 節(jié)點，通過添加 draggable 屬性就可以拖拽了。在 HTML 5 中<img>和<a> 默認情況下是可以拖拽的，所以不需要設(shè)置 draggable 屬性。
清單 3. 通過添加 draggable 屬性來創(chuàng)建源容器中可以拖動的節(jié)點
- <div id="source" style="height:300px;">
- <div id="item1" class="item" draggable="true">item1</div>
- <img id="item2" src="w3c.jpg" class="item"></img>
- <a id="item3" href="http://www.w3.org/TR/html5/" class="item">HTML5 specification</a>
- </div>
創(chuàng)建 HTML 5 拖拽的源容器和目標(biāo)容器
在 HTML 5 中，我們需要給指定的節(jié)點來綁定一些事件來使之成為具有源容器或目標(biāo)容器的功能。在 HTML 5 的拖拽過程中的事件有 7 個，分別是應(yīng)用在目標(biāo)容器或拖動節(jié)點上的 dragstart, drag, dragend 等 3 個事件，以及應(yīng)用在目標(biāo)容器節(jié)點上的dragenter, dragover, dragleave 和 drop 等 4 個事件。表 1 中對這些事件的觸發(fā)機制和常見的操作進行了描述。
表 1. HTML 5 拖拽過程中可以綁定的事件
備注 : 在 Dojo 中所有 dnd 源容器或目標(biāo)容器在拖拽開始時都會調(diào)用 onDndStart 事件方法，而在 HTML 5 中只有拖動的節(jié)點及源容器可以觸發(fā) dragstart 事件，其他容器包括目標(biāo)容器在拖動開始時不會感知源容器及拖動節(jié)點的 dragstart 事件。
清單 4 展示給目標(biāo)容器綁定 dragenter, dragover, dragleave, drop 事件的示例代碼。在 dragenter 和 dragleave 事件中，我們對目標(biāo)容器的背景樣式進行修改使得用戶感知目標(biāo)容器的狀態(tài)(如圖 2 所示)。在 dragover 事件中我們對清單 3 中的鏈接元素(id 屬性值為 item3)的節(jié)點進行了限制。drop 事件中我們要把拖動的節(jié)點插入到目標(biāo)節(jié)點的 DOM 結(jié)構(gòu)中。
清單 4. 創(chuàng)建目標(biāo)容器的事件
- var target = dojo.byId('target');
- dojo.connect(target, 'dragover', function(e){
- // doesn't allows link item (id = “item3”) to drop
- if (e.dataTransfer.getData('id') != "item3"){
- e.preventDefault();
- }
- });
- dojo.connect(target, 'dragenter', function(e){
- //add style
- dojo.addClass(target, "over");
- });
- dojo.connect(target, 'dragleave', function(){
- //remove style
- dojo.removeClass(target, "over");
- });
- dojo.connect(target, 'drop', function(e){
- //remove style if drop is successful
- dojo.removeClass(target, "over");
- // stops the browser from redirecting
- if (e.stopPropagation) e.stopPropagation();
- var itemId = e.dataTransfer.getData('id');
- var dragItem = dojo.byId(itemId);
- e.target.appendChild(dragItem);
- }
圖 2. 當(dāng)拖動節(jié)點到目標(biāo)容器是時對目標(biāo)容器進行高亮顯示
從清單 4 中我們在目標(biāo)容器上對事件對象的 dataTransfer 屬性進行了 getData 操作——取出了關(guān)鍵字 id 對應(yīng)的數(shù)據(jù)。在 HTML 5 拖拽過程中，用戶可以在表 1 定義的事件里通過 event.dataTransfer 得到 DataTransfer 對象 ( 詳見 W3C 網(wǎng)站上的接口定義)并對其進行定制傳輸數(shù)據(jù)、定制拖拽影像等操作。例如我們可以在 dragstart 事件中通過 setData 方法初始化數(shù)據(jù)(代碼詳見附件)。表 2 中列出了這各數(shù)據(jù)對象的方法及常用的用途。
表 2. DataTransfer 的常用方法
與桌面進行交互
除了在網(wǎng)頁中對一些頁面上的元素進行拖拽以外，HTML 5 擴充的 API 還允許網(wǎng)頁與文件系統(tǒng)進行交互，比如從文件系統(tǒng)拖一個或幾個文件到網(wǎng)頁中，或是從網(wǎng)頁拖到文件系統(tǒng)中。以前者為例，當(dāng)我們從桌面或其它文件夾拖動文件到網(wǎng)頁上某個目標(biāo)結(jié)點時，我們可以通過 DataTransfer 的 files 屬性得到這些文件數(shù)量以及文件的屬性及內(nèi)容。DataTransfer.files.length 的大小即為拖動文件的數(shù)量，當(dāng)沒有拖動文件時，files.length 的大小即為 0，可用來判斷是否有文件拖動。
清單 5. 通過 dataTransfer.files 拿到文件對象
- var files = e.dataTransfer.files;
- var msg = "";
- for (var i = 0; i < files.length; i++) {
- console.log ("Name: " + files[i].name + ", fileSize: " + files[i].size);
- var dataReader = new FileReader();
- dataReader.onload = function(){
- msg += ("content: " + dataReader.result);
- }
- dataReader.readAsText(files[i]);
- }
從清單 5 中的代碼中我們可以看到 files 中存儲了若干 file 對象，通過這個對象可以獲取文件名，文件大小等。然后我們可以通過 FileReader 獲取文件的內(nèi)容。獲取內(nèi)容的 FileReader 并不是 HTML 5 拖拽的功能，而是借助了 File API 。它可以以文本，二進制，以及 dataURL 的形式讀取，實現(xiàn)讀取文件內(nèi)容實現(xiàn)文件上傳等，在我們的示例代碼 HTML 5dndfile.html 中我們演示了通過 readAsText 方法讀取文本文件和通過 readAsDataURL 方法讀取圖像文件的使用。
與桌時行交互時，我們只需要對將清單 5 中給出的代碼稍加修改加到目標(biāo)容器的 drop 事件中，其它事件不用修改。例如清單 6 所示。
清單 6. 在目標(biāo)容器的 drop 事件讀取文本文件的內(nèi)容
- dojo.connect(textdiv, 'drop', function(e){
- if (e.stopPropagation){
- e.stopPropagation(); // stops the browser from redirecting
- }
- var files = e.dataTransfer.files;
- var msg = "";
- for (var i = 0; i < files.length; i++) {
- msg += ("Name: " + files[i].fileName + ", fileSize: " + files[i].fileSize);
- var dataReader = new FileReader();
- dataReader.onload = function(){
- msg += ("content: " + dataReader.result);
- textdiv.textContent = msg;
- }
- dataReader.readAsText(files[i]);
- }
- });
這樣當(dāng)我們拖動一個文本文件到指定的目標(biāo)區(qū)域時，我們就可以看到文件內(nèi)容。
Dojo 和 HTML 5 拖拽功能的比較和選擇
Dojo 實現(xiàn)了一套完整的拖拽框架和事件機制，并提供了默認的實現(xiàn)，用戶可以通過聲明的方式快速實現(xiàn)拖拽，而且還可以通過繼承默認的 Source、Target 以及 Avatar 實現(xiàn)拖拽定制化。從使用經(jīng)驗上來看，Dojo 更傾向于完整的 DOM 節(jié)點操作，而數(shù)據(jù)的傳輸往往是通過綁在 DOM 節(jié)點上的屬性實現(xiàn)的。
HTML 5 的拖拽現(xiàn)在還在規(guī)范的定制和完善中，各個主流瀏覽器對該規(guī)范的支持也是各有千秋，基本上還處于發(fā)展的階段。本文中提供的示例僅在 Firefox 3.6 以上版本測試通過。HTML 5 作為新時代的 HTML 協(xié)議，拖拽事件中的 DataTransfer 接口體現(xiàn)了拖拽過程中以數(shù)據(jù)傳輸為中心的發(fā)展前景。與此同時，跟 File API 的結(jié)合可以使得 Web 應(yīng)用的數(shù)據(jù)交互通過拖拽操作延伸到最終用戶的桌面及文件系統(tǒng)上。另外 HTML 5 還可以實現(xiàn)在不同瀏覽器窗口之間的拖拽操作，也是拖拽過程傳輸數(shù)據(jù)的一種應(yīng)用。
小結(jié)
對比 Dojo 和 HTML 5，我們不難發(fā)現(xiàn)在使用 Dojo 比 HTML 5 可以更容易地開發(fā)出體驗效果非常好的拖拽應(yīng)用;而 HTML 5 作為 HTML 的新規(guī)范，注重了拖拽過程中數(shù)據(jù)傳輸?shù)闹匾浴烧呷绻梢匀诤蟿t可以互補其短。通過實驗，筆者發(fā)現(xiàn) Dojo dnd 與 HTML 5 拖拽暫時不能在同一結(jié)點上同時使用，由于 Dojo 是在 HTML4 規(guī)范基礎(chǔ)上的工具包，它們之間可能因在事件上的沖突會導(dǎo)致 HTML 5 拖拽不可用。但是我們有理由相信，隨著 HTML 5 規(guī)范的發(fā)展，將會有支持 HTML 5 拖拽的工具包出現(xiàn)，屆時開發(fā)者可以更為便捷的開發(fā)出更為豐富的 Web 應(yīng)用。
原文鏈接：http://www.ibm.com/developerworks/cn/web/1102_guoqing_draganddrop/
【編輯推薦】
