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