偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

拖拽:從 Dojo 到 HTML 5

開(kāi)發(fā) 前端
拖拽是 Web 2.0 應(yīng)用中最流行的技術(shù)之一。本文將介紹如何在網(wǎng)絡(luò)應(yīng)用程序中使用 dojo 和 HTML5 這兩種技術(shù)的拖拽功能。并將通過(guò)示例詳細(xì)介紹 HTML5 的拖拽功能。

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)建拖拽的源容器和可拖拽的元素

  1. <div id="source" style="height:400px;" dojoType="dojo.dnd.Source">   
  2.   <div id="item1" class="dojoDndItem item" dndType="divItem">item1</div>   
  3.   <img src="w3c.jpg" class="dojoDndItem item" dndType="imageItem"></img>   
  4.   <a href="http://www.w3.org/TR/html5/" class="dojoDndItem item" dndType="linkItem"> 
  5.   HTML5 specification</a>   
  6.  </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)型

  1. <div id="target" style="height:400px;" dojoType="dojo.dnd.Target"   
  2. 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)用效果圖

拖拽:從 Dojo 到 HTML5 

#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)

  1. <div id="source" style="height:300px;">   
  2.   <div id="item1" class="item" draggable="true">item1</div>   
  3.   <img id="item2" src="w3c.jpg" class="item"></img>   
  4.   <a id="item3" href="http://www.w3.org/TR/html5/" class="item">HTML5 specification</a>   
  5.  </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ò)程中可以綁定的事件

HTML5

備注 : 在 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)容器的事件

  1. var target = dojo.byId('target');   
  2.  dojo.connect(target, 'dragover', function(e){   
  3.   // doesn't allows link item (id = “item3”) to drop   
  4.   if (e.dataTransfer.getData('id') != "item3"){   
  5.     e.preventDefault();   
  6.   }   
  7.  });   
  8.  
  9.  dojo.connect(target, 'dragenter', function(e){   
  10.   //add style   
  11.   dojo.addClass(target, "over");   
  12.  });   
  13.  
  14.  dojo.connect(target, 'dragleave', function(){   
  15.   //remove style   
  16.   dojo.removeClass(target, "over");   
  17.  });   
  18.  
  19.  dojo.connect(target, 'drop', function(e){   
  20.   //remove style if drop is successful   
  21.   dojo.removeClass(target, "over");   
  22.       
  23.   // stops the browser from redirecting   
  24.   if (e.stopPropagation) e.stopPropagation();   
  25.       
  26.     
  27.   var itemId = e.dataTransfer.getData('id');   
  28.   var dragItem = dojo.byId(itemId);   
  29.   e.target.appendChild(dragItem);     
  30.     
  31.  }  

圖 2. 當(dāng)拖動(dòng)節(jié)點(diǎn)到目標(biāo)容器是時(shí)對(duì)目標(biāo)容器進(jìn)行高亮顯示

HTML 5

從清單 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 的常用方法

HTML 5

與桌面進(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ì)象

  1. var files = e.dataTransfer.files;   
  2.   var msg = "";   
  3.   for (var i = 0; i < files.length; i++) {   
  4.    console.log ("Name: " + files[i].name + ", fileSize: " + files[i].size);   
  5.    var dataReader = new FileReader();   
  6.    dataReader.onload = function(){   
  7.      msg += ("content: " + dataReader.result);   
  8.    }   
  9.   dataReader.readAsText(files[i]);   
  10.  }  

從清單 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)容

  1. dojo.connect(textdiv, 'drop', function(e){   
  2.   if (e.stopPropagation){   
  3.     e.stopPropagation(); // stops the browser from redirecting   
  4.   }   
  5.   var files = e.dataTransfer.files;   
  6.   var msg = "";   
  7.   for (var i = 0; i < files.length; i++) {   
  8.     msg += ("Name: " + files[i].fileName + ", fileSize: " + files[i].fileSize);   
  9.     var dataReader = new FileReader();   
  10.     dataReader.onload = function(){   
  11.       msg += ("content: " + dataReader.result);   
  12.       textdiv.textContent = msg;   
  13.     }   
  14.     dataReader.readAsText(files[i]);   
  15.   }   
  16.  });  

這樣當(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/

【編輯推薦】

  1. 初學(xué)者必知的HTML 5入門(mén)級(jí)技巧
  2. 12個(gè)精妙有趣的HTML 5應(yīng)用
  3. HTML 5新的 Input 類(lèi)型
  4. 20個(gè)HTML 5和CSS3的免費(fèi)網(wǎng)站模板與教程
  5. 用Dojo實(shí)現(xiàn)Ajax請(qǐng)求:XHR、跨域、及其他
責(zé)任編輯:陳貽新 來(lái)源: developerWorks
相關(guān)推薦

2011-02-25 10:19:23

ibmdwHTML5Web開(kāi)發(fā)

2012-04-24 09:48:49

HTML5

2011-08-01 16:43:51

ibmdwHTML5Dojo

2011-09-08 09:38:46

HTML5 WidgeDojo

2011-04-25 14:20:49

DojoHTML 5

2011-04-22 15:02:19

HTML5Dojo

2012-05-17 13:17:26

HTML5

2010-07-23 10:08:44

Dojo 1.5

2011-08-18 09:05:50

HTML 5

2013-06-06 10:42:25

2015-03-19 14:50:27

編程拖拽編程合格程序員

2012-05-28 10:01:19

2015-12-02 11:18:32

2020-09-09 15:30:07

5GCPRI接口

2011-11-24 21:12:35

ibmdw

2012-01-18 10:49:05

ibmdw

2013-03-25 17:16:11

2009-09-22 12:59:58

ibmdwDojo

2012-12-20 11:11:46

IBMdW

2019-09-27 10:25:39

5G浪潮云計(jì)算
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)