Dojo兩種截然不同的拖拽效果和方法

拖拽，是目前較為常見的 Ajax 技術。目前以 Ajax 技術建構的電子商務網站往往都采用拖放商品到購物車這種直覺的方式代替以往繁複的操作來實作客戶對商品的選購。 掌握 Dojo 系列 的這一篇文章将以作者親身的開發經曆為基礎，詳細講述如何使用 Dojo 所提供的功能子產品開發出各種各樣的拖動和拖放效果。此外，還詳細叙述如何對 Dojo 的拖拽功能進行修改和配置，以及對拖拽的實作原理進行了解釋。

Dojo 支援的兩種拖拽方式

在開始嘗試了解實作 Dojo 拖拽效果的使用方法以前，首先必須明确拖拽具有兩種截然不同的表現效果。

第一種表現效果是圖示被拖拽到哪裡，其就會被直接放到哪裡，這個拖拽效果是圖示完全緊跟拖拽的動作，與每一個拖拽動作的運動軌迹完全契合，這種效果被稱為“拖動”。第二種表現效果是當圖示被拖拽到一個地方，松開滑鼠的時候，圖示會以目前位置為基礎而以其它圖示為參照系進行位置的自動調整。這種效果被稱為“拖放”。

Dojo 的拖動

“拖動”與“拖放”相比較，原理更加容易了解，使用更加簡單。而且更加貼近于人們直覺印象中的“拖拽”效果。

最簡單的拖動執行個體

要在 Dojo 的支援下，實作拖動的效果所需要的隻是使用 Dojo 所提供的 Dojo 标簽屬性标注出希望實作拖動效果的實體。簡單的說，就是如果希望一個實體可以拖動，則隻需要在這個實體的标簽裡面加上 dojoType=“dojo.dnd.Moveable”這個屬性。例如要實作一個表格的拖動，則隻需要在這個表格的聲明标簽“<table>”裡加上 dojoType=“dojo.dnd.Moveable”這個屬性。甚至就是在“<tr>”或“<td>”标簽中加上 dojoType=“dojo.dnd.Moveable”，也可以實作對應實體的拖動效果。

清單 1

<script type="text/javascript"> dojo.require("dojo.dnd.move"); //引入Dojo的拖動功能子產品 dojo.require("dojo.parser"); //引入解析Dojo标記的功能子產品 </script> <table dojoType="dojo.dnd.Moveable"> <tbody><tr><td>Haha, I am a good guy.</td></tr></tbody> </table> <!--引入dojoType="dojo.dnd.Moveable"，讓上面的表格可以拖動-->

需要注意的是靜态建立可拖動實體需要引入 dojo.require("dojo.parser") 。

動态實作可拖動實體

在清單 1 中，通過在一些實體的标簽裡面加上相應的 Dojo 标簽屬性來實作可拖動實體的建立。這種靜态實作可拖動實體的方法簡單明了。但是在更多的情況下，往往需要根據一些實際情況運作得到的資料來動态的建立可拖動實體。在這種情況下，靜态實作可拖動實體的方法就不能滿足當下的需求。值得慶幸的是 Dojo 對于所有靜态實作的方法都基本對應有一套相應的動态實作方法。

清單 2

<script type="text/javascript" src="dojo_path/dojo/dnd/move.js"></script> <script type="text/javascript"> dojo.require("dojo.dnd.move"); var m1; var init = function(){ m1 = new dojo.dnd.Moveable("bad",{});//申明 id 為 "bad" 的實體為可拖動實體 }; dojo.addOnLoad(init);// 表示在頁面加載完成以後，執行 init 函數 </script> <div id="bad"> You can cop me "Haha, I am a bad guy." </div>

需要注意的是 dojo.dnd.Moveable("bad",{}) 中的大括号用來設定可拖動實體“bad”的一些與拖動相關的屬性，目前可以暫時設為空，則不設定任何與拖動相關的屬性。在後面的講述中，一些相關的重要屬性将被逐漸介紹。

拖動柄

如果運作清單 1 和清單 2 中的代碼，然後嘗試在其頁面中使用滑鼠去選擇可拖動實體中的内容。就會發現，無論使用何種方法都無法選擇可拖動實體中的内容，當然就更談不上複制可拖動實體中的内容了。

仔細分析無法選擇可拖動實體中内容的原因，就會發現如果要選擇頁面中的某一部分内容，其動作步驟為，按住滑鼠左鍵不放，然後拖動滑鼠選擇一塊區域作為确定選擇的内容；而如果要拖動一個可拖動實體，其動作步驟也為，按住滑鼠左鍵，然後拖動滑鼠引起可拖動實體的移動。

是以如果讓某個實體具有了可拖動的功能，則當對這個實體點下滑鼠左鍵，并拖動滑鼠時，就浏覽器看來，其将不能了解這個動作的目的是要拖動該實體還是選擇該實體裡面的内容。因為這兩個具有不同含義的動作就其動作本身來說是一模一樣的，浏覽器沒有辦法對這兩個動作進行區分。

但現實的情況往往需要一個實體既可以被拖動，又可以被選擇其内部所包含的内容。 Dojo 通過給可拖動實體增加一個拖動柄，實作了選擇内容動作和拖動實體動作的區分。

聲明拖動柄的方法為在聲明可拖動實體的時候，在可拖動實體的标簽中再加上一個除 dojoType 之外的另外一個 Dojo 标簽屬性 handle= “”，handle 後面的雙引号中需要填入的是作為拖動柄部分的那個實體的 id 值。

清單 3

本文轉自IBM Developerworks中國

      請點選此處檢視全文