測試 Dojo (IV)

在這個網頁，我們試圖利用 CSS 的效果來幫助使用者在拖曳的過程中，明確 的知道目前的狀態。請先使用下列的範例！

• 首先，大家應該會先發現輸出區塊的顏色變了；其實如果你已經試過了 這個網頁，你應該已經發現：當滑鼠游標經過區塊的時候，這些區塊的顏色 會變成有點兒黃黃的樣子。這個效果很好，因為使用者可以馬上注意到滑鼠 進入到了某個特定區域。要產生這樣的效果很簡單，我們只需要增加如下 的 CSS 設定：

  .dojoDndItemOver {background: #feb;border: 1px dotted gray; }
  

  這個設定適用於所有 dojoDndItem 物件。

• 請試著在文字欄位的地方輸入一些非數字的文字，並觀察發生什麼事？ 有時候我們需要設計一個只允許輸入數字的文字欄位，傳統的 HTML 元件 無法做這項限制，而必須加上 Javascript。Dojo 提供了一個非常好用 的元件 dijit.form.NumberTextBox，我們只需要在原先文字欄位的地方設定 dojoType 為 dijit.form.NumberTextBox 即可，非常方便。Dojo 也提供 許多其他的輸入元件，有興趣的請自行發掘。

  金額：<input type="text" dojoType="dijit.form.NumberTextBox" id="name"></input>
  

• 其他的畫面效果都跟 Drag and Drop 有關，所以我們就以動作來分步驟說明 CSS 的設定。假設你開始拖曳輸入區塊到輸出區塊：
  1. 首先，請先留意輸入區塊的 Avatar 的樣子。由於 Avatar 代表被 drag 的物件，所以基本上的樣子會是原來區塊的樣子，但是我們可以對它進行變更。 本網頁的變更設定如下：

     .dojoDndAvatar {font-size: 75%; color: grey;}
     .dojoDndAvatarItem {background: #0c9;}
     .dojoDndAvatarHeader {background: #009;}
     

     第一個 CSS 敘述表示把 Avatar 的字體變小，而且把字體顏色改成灰色； 第二個 CSS 敘述表示把 Avatar 的背景顏色（也就是 proxy 框框的顏色） 變成 #00CC99。第三個 CSS 敘述表示把 Avatar 的標題（header）的背景顏色 變成 #000099。對於 Avatar 還有哪些可以改變的，請參考 dojo dnd package。

  2. drag 物件的標題顏色是 #000099 一直到可以 drop 的位置後，標題顏色 會變成綠色，這樣的好處是使用者知道什麼時候可以將物件 drop 掉；而達成 這個效果的方式，就是加上如下的 CSS 敘述：

     .dojoDndAvatarCanDrop .dojoDndAvatarHeader {background: green;}
     

  3. 在拖曳的過程中，請注意另一個畫面效果：輸入以及輸出區塊的左邊或者右邊 會出現紅色的虛線。請仔細觀察一些現象：如果拖曳的是輸入區塊，而且已經出現 可以 drop 的綠色標題，那麼會有兩個情形：如果這時候輸出區塊的右邊出現紅色的虛線， 那麼輸入區塊的位置會和輸出區塊對調；若紅色的虛線出現在左邊，那麼位置就 不會對調。要說明這個畫面效果，我們需要分別說明"為什麼只有左邊和右邊"以及 "如何呈現紅色的虛線"。
     • 為什麼只有左邊和右邊：就像之前曾經說過，我們把兩個可以拖曳的區塊 置放於一個 div 的標籤內，其內容如下，而第 01 行和第 08 行代表這個區域。

       01  <div dojoType="dojo.dnd.Source" class="tundra" style="width:800px">
       02    <div name="myform" id="myform" class="dojoDndItem">
       03    金額：<input type="text" dojoType="dijit.form.NumberTextBox" id="name"></input>
       04    <button dojoType="dijit.form.Button" onClick="callRemote();">
       05    <span style="font-size:8pt">確定</span></button>
       06    </div>
       07    <div id="textBox" class="dojoDndItem"></div>
       08  </div>
       

       輸入區塊由第 02-06 行代表，而輸出區塊由第 07 行代表。從 DOM 的角度看， 也就是說代表整個區域的 div 是一個父節點，這個節點有兩個子節點，其 id 分別是 myform 和 textBox。在 XML 的學習中，我們知道兩個子節點是兄弟關係 （sibling）而且有順序性；也就是說，myform 是 div 的第一個子節點，textBox 是 div 的第二個子節點。這樣的樹狀結構就解釋了為什麼紅色虛線會出現在 drop 區塊的左邊或者右邊：出現在左邊，代表要把拖曳的區塊放置於 drop 區塊的 前一個節點；若出現在右邊，代表把拖曳的區塊放置於 drop 區塊的下一個節點。 因此，把輸入區塊（順序是 1）drop 到輸出區塊（順序是 2）的時候，紅色虛線 出現在輸出區塊的左邊，就是代表要把輸入區塊放置到輸出區塊的前一個節點， 可是順序 2 的之前就是 1，所以兩個區塊不會對調。可是，如果紅色虛線出現 在輸出區塊的右邊，就是代表要把輸入區塊放置到輸出區塊的下一個節點，也 就是順序變成 3；因為第一個節點（輸入區塊）被搬到最後一個節點，所以 輸出區塊的順序變成 1，而輸入區塊變成 2，這樣一來，兩個區塊就有了 對調的效果。

     • 希望能夠在可以 drop 的區塊上出現紅色虛線在左邊和右邊，我們需要加入 如下的 CSS 設定：

       /* 左邊邊框的顏色變成紅色 */
       .dojoDndItemBefore {border-left: 2px dotted red; }
       /* 右邊邊框的顏色變成紅色 */
       .dojoDndItemAfter {border-right: 2px dotted red; }