前端工程師-設計開發(fā)拖拽從Dojo到HTML5教學

1、拖拽是 web 2.0 應用中最流行的技術之一。本文將介紹如何在網絡應用程序中使用 dojo 和 html5 這兩種技術的拖拽功能。并將通過示例詳細介紹 html5 的拖拽功能。ad： dojo 及 html 5 簡介dojo 是目前最流行的開源 javascript 工具庫之一，很多開發(fā)者以及企業(yè)用戶都把dojo 作為首選的 javascript 工具。dojo 為 web 應用的開發(fā)提供了大量的客戶端組件，能夠讓你可以方便的進行 html dom 操作、拖拽、ajax 調用、定制可視化控件等來使得你的 web 應用變成富網絡應用 (ria)。而且 dojo 在性能、可訪問性、多語言支持以及

2、文檔方面都做的非常出色，這也是企業(yè)選擇 dojo 的原因之一。51cto推薦專題：html 5 下一代web開發(fā)標準詳解html 5 是最新一代的 html，它將成為 html、xhtml 以及 html dom 的新標準， html 5 是 w3c 與 whatwg 合作的結果，目前仍外于開發(fā)中 ; 自從上一代 html4，web 世界已經發(fā)生了巨大的變化，html 5 的到來將更大的促進 web 的發(fā)展，html 5 提供了很多新的功能，主要有：新的 html 元素，例如 section, nav, header, footer, article 等用于繪畫的 canvas 元素用于多媒體

3、播放的 video 和 audio 元素用于定位的 geolocation api本地存儲以及離線應用web workers拖拽 api文件 api我們主要對 html 5 的拖拽功能進行講解，并結合文件 api 與桌面進行交互。來與 dojo 的 dnd 拖拽組件進行比較。使用 dojo 創(chuàng)建及定制拖拽應用類似 dojo 其他組件，拖拽的實現(xiàn)有兩種方式：聲明式和編程式。在這里我們使用聲明式的方式做簡要的介紹。在 dojo 拖拽實現(xiàn)中，有兩個重要的元素 dojo.dnd.source 和 dojo.dnd.target。這兩個元素分別標示了拖拽中的源容器 source 和目標容器 target

4、。值得注意的是源容器 source 默認也是目標容器 target，而不需要作目標容器 target 的聲明。我們在源容器 source 中創(chuàng)建一些可以拖動的元素，要讓這些元素可拖動，我們要為這些元素添加 class 屬性值 dojodnditem。下面的示例代碼定義了一個源容器 source 以及一些可以拖動的元素。在這些可以拖動的元素中我們可以定義它們的拖拽類型 dndtype。dndtype 的值開發(fā)者可以自己定義，而目標容器 target 元素的 accept 屬性定義了該目標容器接受的拖拽類型。清單 1. 創(chuàng)建拖拽的源容器和可拖拽的元素1. <div id="

5、;source" style="height:400px;" dojotype="dojo.dnd.source">   2.   <div id="item1" class="dojodnditem item" dndtype="divitem">item1</div>   3.   <img src

6、="w3c.jpg" class="dojodnditem item" dndtype="imageitem"></img>   4.   <a href="/tr/html5/" class="dojodnditem item" dndtype="linkitem"> 5.  

7、0;html5 specification</a>   6.  </div>  對于 target 我們可以創(chuàng)建一個 div，然后加上屬性 dojotype=”dojo.dnd.target”和屬性 accept。不在 accept 中的類型的 dojodnditem 元素將不被這個容器接受。例如清單 2 中的目標容器只接受 divitem 和 imageitem 這兩種類型，那么清單 1 中的 linkitem 將不能被拖到這個目標容器中。清單 2. 創(chuàng)建拖拽的目標容器和可接受的類型1. <div

8、60;id="target" style="height:400px;" dojotype="dojo.dnd.target"   2. accept="divitem, imageitem"> 真正 web 應用的拖拽沒有這么簡單，開發(fā)者往往需要在拖拽的過程中更多的介入。這時候可以通過對 dojo 提供的 dojo.dnd.source 和 dojo.dnd.target 進行繼承擴展，開發(fā)滿足業(yè)務需要的功能和特性。這里將不贅述。使用 html 5

9、 創(chuàng)建拖拽應用在這一章中，我們將要使用 html 5 創(chuàng)建一個簡單的拖拽應用，如圖 1 所示，用戶可以把網頁上內容從左邊的區(qū)域拖放到右邊的區(qū)域。這個應用程序的代碼可到附件中可以下載。圖 1. html 5 拖拽應用效果圖 創(chuàng)建可以拖動的節(jié)點使用 html 5 創(chuàng)建拖拽只需要對可拖拽的節(jié)點進行聲明給可以拖拽的節(jié)點添加 draggable 屬性并設值為 true。如清單 3 中的 div 節(jié)點，通過添加 draggable 屬性就可以拖拽了。在 html 5 中<img>和<a> 默認情況下是可以拖拽的，所以不需要設置 draggable 屬性。清單 3. 通過添

10、加 draggable 屬性來創(chuàng)建源容器中可以拖動的節(jié)點1. <div id="source" style="height:300px;">   2.   <div id="item1" class="item" draggable="true">item1</div>   3.   <img id="it

11、em2" src="w3c.jpg" class="item"></img>   4.   <a id="item3" href="/tr/html5/" class="item">html5 specification</a>   5.  </div> 

12、0;創(chuàng)建 html 5 拖拽的源容器和目標容器在 html 5 中，我們需要給指定的節(jié)點來綁定一些事件來使之成為具有源容器或目標容器的功能。在 html 5 的拖拽過程中的事件有 7 個，分別是應用在目標容器或拖動節(jié)點上的 dragstart, drag, dragend 等 3 個事件，以及應用在目標容器節(jié)點上的dragenter, dragover, dragleave 和 drop 等 4 個事件。表 1 中對這些事件的觸發(fā)機制和常見的操作進行了描述。表 1. html 5 拖拽過程中可以綁定的事件備注 : 在 dojo 中所有 dnd 源容器或目標容器在拖拽開始時都會調用 ondnds

13、tart 事件方法，而在 html 5 中只有拖動的節(jié)點及源容器可以觸發(fā) dragstart 事件，其他容器包括目標容器在拖動開始時不會感知源容器及拖動節(jié)點的 dragstart 事件。清單 4 展示給目標容器綁定 dragenter, dragover, dragleave, drop 事件的示例代碼。在 dragenter 和 dragleave 事件中，我們對目標容器的背景樣式進行修改使得用戶感知目標容器的狀態(tài)(如圖 2 所示)。在 dragover 事件中我們對清單 3 中的鏈接元素(id 屬性值為 item3)的節(jié)點進行了限制。drop 事件中我們要把拖動的節(jié)點插入到目標節(jié)點的 do

14、m 結構中。清單 4. 創(chuàng)建目標容器的事件1. var target = dojo.byid('target');   2.  dojo.connect(target, 'dragover', function(e)   3.   / doesn't allows link item (id = “item3”) to drop 

15、60;4.   if (e.datatransfer.getdata('id') != "item3")   5.     e.preventdefault();   6.      7.  );   8.  9.  dojo.connect(target, 'dragenter', function(e)

16、   10.   /add style   11.   dojo.addclass(target, "over");   12.  );   13.  14.  dojo.connect(target, 'dragleave', function()   15.   /remove style   16

17、.   dojo.removeclass(target, "over");   17.  );   18.  19.  dojo.connect(target, 'drop', function(e)   20.   /remove style if drop is successful   21.   dojo

18、.removeclass(target, "over");   22.       23.   / stops the browser from redirecting   24.   if (e.stoppropagation) e.stoppropagation();   25.       2

19、6.     27.   var itemid = e.datatransfer.getdata('id');   28.   var dragitem = dojo.byid(itemid);   29.   e.target.appendchild(dragitem);     30.     31.  &#

20、160; 圖 2. 當拖動節(jié)點到目標容器是時對目標容器進行高亮顯示從清單 4 中我們在目標容器上對事件對象的 datatransfer 屬性進行了 getdata 操作取出了關鍵字 id 對應的數據。在 html 5 拖拽過程中，用戶可以在表 1 定義的事件里通過 event.datatransfer 得到 datatransfer 對象 ( 詳見 w3c 網站上的接口定義)并對其進行定制傳輸數據、定制拖拽影像等操作。例如我們可以在 dragstart 事件中通過 setdata 方法初始化數據(代碼詳見附件)。表 2 中列出了這各數據對象的方法及常用的用途。表 2. datatra

21、nsfer 的常用方法與桌面進行交互除了在網頁中對一些頁面上的元素進行拖拽以外，html 5 擴充的 api 還允許網頁與文件系統(tǒng)進行交互，比如從文件系統(tǒng)拖一個或幾個文件到網頁中，或是從網頁拖到文件系統(tǒng)中。以前者為例，當我們從桌面或其它文件夾拖動文件到網頁上某個目標結點時，我們可以通過 datatransfer 的 files 屬性得到這些文件數量以及文件的屬性及內容。datatransfer.files.length 的大小即為拖動文件的數量，當沒有拖動文件時，files.length 的大小即為 0，可用來判斷是否有文件拖動。清單 5. 通過 datatransfer.files 拿到文件

22、對象1. var files = e.datatransfer.files;   2.   var msg = ""   3.   for (var i = 0; i < files.length; i+)    4.    console.log ("name: 

23、;" +  + ", filesize: " + filesi.size);   5.    var datareader = new filereader();   6.    datareader.onload = function()   7.    

24、  msg += ("content: " + datareader.result);   8.       9.   datareader.readastext(filesi);   10.    從清單 5 中的代碼中我們可以看到 files 中存儲了若干 file 對象，通過這個對象可以獲取文件名，文件大小等。然后我們可以通過 filereader 獲取文件的內

25、容。獲取內容的 filereader 并不是 html 5 拖拽的功能，而是借助了 file api 。它可以以文本，二進制，以及 dataurl 的形式讀取，實現(xiàn)讀取文件內容實現(xiàn)文件上傳等，在我們的示例代碼 html 5dndfile.html 中我們演示了通過 readastext 方法讀取文本文件和通過 readasdataurl 方法讀取圖像文件的使用。與桌時行交互時，我們只需要對將清單 5 中給出的代碼稍加修改加到目標容器的 drop 事件中，其它事件不用修改。例如清單 6 所示。清單 6. 在目標容器的 drop 事件讀取文本文件的內容1. dojo.connect(te

26、xtdiv, 'drop', function(e)   2.   if (e.stoppropagation)   3.     e.stoppropagation(); / stops the browser from redirecting   4.      5.   var files

27、0;= e.datatransfer.files;   6.   var msg = ""   7.   for (var i = 0; i < files.length; i+)    8.     msg += ("name: " +

28、60;filesi.filename + ", filesize: " + filesi.filesize);   9.     var datareader = new filereader();   10.     datareader.onload = function()   11.       msg += ("content: " + datareader.result);   12.       textdiv.textcontent = ms