拖拽:從 Dojo 到 HTML 5(1)

來源:互聯網
上載者:User

Dojo 及 HTML 5 簡介

Dojo 是目前最流行的開源 JavaScript 工具庫之一,很多開發人員以及企業使用者都把Dojo 作為首選的 JavaScript 工具。Dojo 為 Web 應用程式的開發提供了大量的用戶端組件,能夠讓你可以方便的進行 HTML DOM 操作、拖拽、AJAX 調用、定製可視化控制項等來使得你的 Web 應用程式變成富網路應用 (RIA)。而且 Dojo 在效能、可訪問性、多語言支援以及文檔方面都做的非常出色,這也是企業選擇 Dojo 的原因之一。

51CTO推薦專題:HTML 5 下一代Web開發標準詳解

HTML 5 是最新一代的 HTML,它將成為 HTML、XHTML 以及 HTML DOM 的新標準, HTML 5 是 W3C 與 WHATWG 合作的結果,目前仍外於開發中 ; 自從上一代 HTML4,Web 世界已經發生了巨大的變化,HTML 5 的到來將更大的促進 Web 的發展,HTML 5 提供了很多新的功能,主要有:

◆新的 HTML 元素,例如 section, nav, header, footer, article 等

◆用於繪畫的 Canvas 元素

◆用於多媒體播放的 video 和 audio 元素

◆用於定位的 Geolocation API

◆本機存放區以及離線應用

◆Web Workers

◆拖拽 API

◆檔案 API

我們主要對 HTML 5 的拖拽功能進行講解,並結合檔案 API 與案頭進行互動。來與 Dojo 的 dnd 拖拽組件進行比較。

使用 Dojo 建立及定製拖拽應用

類似 Dojo 其他組件,拖拽的實現有兩種方式:聲明式和編程式。在這裡我們使用聲明式的方式做簡要的介紹。

在 Dojo 拖拽實現中,有兩個重要的元素 dojo.dnd.Source 和 dojo.dnd.Target。這兩個元素分別標示了拖拽中的源容器 Source 和目標容器 Target。值得注意的是源容器 Source 預設也是目標容器 Target,而不需要作目標容器 Target 的聲明。我們在源容器 Source 中建立一些可以拖動的元素,要讓這些元素可拖動,我們要為這些元素添加 class 屬性值 DojoDndItem。下面的範例程式碼定義了一個源容器 Source 以及一些可以拖動的元素。在這些可以拖動的元素中我們可以定義它們的拖拽類型 dndType。dndType 的值開發人員可以自己定義,而目標容器 Target 元素的 accept 屬性定義了該目標容器接受的拖拽類型。

清單 1. 建立拖拽的源容器和可拖拽的元素

 
  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>  

對於 Target 我們可以建立一個 div,然後加上屬性 dojoType=”dojo.dnd.Target”和屬性 accept。不在 accept 中的類型的 dojoDndItem 元素將不被這個容器接受。例如清單 2 中的目標容器只接受 divItem 和 imageItem 這兩種類型,那麼清單 1 中的 linkItem 將不能被拖到這個目標容器中。

清單 2. 建立拖拽的目標容器和可接受的類型

 
  1. <div id="target" style="height:400px;" dojoType="dojo.dnd.Target"   
  2. accept="divItem, imageItem"> 

真正 Web 應用程式的拖拽沒有這麼簡單,開發人員往往需要在拖拽的過程中更多的介入。這時候可以通過對 Dojo 提供的 dojo.dnd.Source 和 dojo.dnd.Target 進行繼承擴充,開發滿足業務需要的功能和特性。這裡將不贅述。

使用 HTML 5 建立拖拽應用

在這一章中,我們將要使用 HTML 5 建立一個簡單的拖拽應用,如圖 1 所示,使用者可以把網頁上內容從左邊的地區拖放到右邊的地區。這個應用程式的代碼可到附件中可以下載。

圖 1. HTML 5 拖拽應用效果圖

 


[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。