Asp.net Ajax實現拖放實戰

    摘要：關於Asp.net Ajax架構來實現拖放有多種方式，http://www.cncms.com.cn/ajax/10093_2.htm。
比較簡單的一種是用AjaxControlToolkit中的伺服器控制項如DragPanelExtender等
但是在效率和拖放之間資料的交換細節等方面與實際應用有些偏差。估完全採用客戶實現IDragSource和IDropTarget介面。
可以先參考陳黎夫先生的http://www.cnblogs.com/dflying/archive/2007/05/29/763564.html

    項目背景：本功能是為了實現事業單位的績效考核系統中的一個評分模組。評分有很多評分的指標，指標下面有子指標，末級
指標下面有具體評分的考核點，每個考核點根據基本的考核量表來評分。同時，評分的介面可以有多種展示，第一種可以點擊
每個評分點進去打分，第二種就是給定一個excel表似的試卷一樣的頁面。而拖放效果的實現，是要求在第一種評分方式下將
被考核人員，直接拖動到對應的分值地區內。
根據業務需求，因此陳黎夫先生的例子，在這裡有很多需要擴充的地方。因此這篇文章給對Asp.net Ajax架構用戶端實現拖放
有一定瞭解的朋友。
1）需要實現回拖，就是說已經拖放到評分地區的元素，要可以拖回到原來的地區。
2）可以被投放的地區，也要互相實現拖放
3）在自己的地區拖放要被屏蔽
4）在拖放的時候，相關的資料對象要適當的儲存
5）拖放結束後評分的結果要保持到資料庫，重新開啟這個頁面時，得到相應分數的人應該自動被添加相應的得分地區，並且
相應的元素要添加被拖放到行為，被投放的地區添加可以被投放的行為。
綜上幾點，陳黎夫先生的例子只能限於示範微軟的ajax拖放技術，對於實用階段還有一定的距離。

 

直觀介面如下：

 

實現本項目的需要需要做到以下幾點
1）同樣的資料，有多種顯示要求。所以整個介面使用xml+xslt技術產生。大家參考我以前關於xml+xslt的文章
2）實現拖放，將陳黎夫先生的例子複製過來改改拖放就可以實現了。
3）需要實現回拖，就是說已經拖放到評分地區的元素，要可以拖回到原來的地區。
將每個地區註冊為可以投放的地區

頁面初始化時，將要投放的地區迴圈，添加可以投放的行為
$create(Score.DropPersonBehavior, { "id": id, "name": "personDropBehavior" + id }, null, null, this);

將要拖放的元素添加可以拖放的行為，
$create(Score.DraggablePersonBehavior, { "person": person, "name": "personDragBehavior" + i }, null, null, li);

每個元素拖放結束後，註冊為可以拖放的行為
drop: function(dragMode, dataType, data)
{
 if (dataType == 'Person' && data)
 {
     var rectId = parseInt(this.get_id());
     if (rectId == 500)
  Array.add(dropRectSource, data);
     else
  Array.add(dropRect[rectId], data);
     var li = document.createElement("LI");
     li.innerHTML = data.PersonName + '[' + data.OrgName + ']';
     li.className = 'personlistcls';
     li.id = 'li_' + rectId + '_' + data.Id;
     if (this.get_element().getElementsByTagName("LI").length == 0) this.get_element().innerHTML = '';
     this.get_element().appendChild(li);
     this.get_element().style.backgroundColor = "#ffffff";

     $create(Score.DraggablePersonBehavior, { "person": data }, null, null, li);
 }
},
然後將原來的行為登出
onDragEnd: function(canceled)
{
 //if (sourceRectIndex == targetRectIndex) return;
 if (this._visual) this.get_element().parentNode.removeChild(this._visual);
 if (!canceled)
 {
     var sid = parseInt(this.get_element().id.split('_')[1]);
     this.get_element().parentNode.removeChild(this.get_element());
     if (sid == '500')
  Array.remove(dropRectSource, this._person);
     else
  Array.remove(dropRect[sid], this._person);
     this.dispose();
 }
},

4）在拖放的時候，相關的資料對象要適當的儲存
在頁面初始化時，根據評分地區的多少，迴圈評分地區，為每個地區添加一個數組。然後伴隨每次拖放將資料動態儲存到相應的數組中

5）拖放結束後評分的結果要保持到資料庫，重新開啟這個頁面時，得到相應分數的人應該自動被添加相應的得分地區，並且
相應的元素要添加被拖放到行為，被投放的地區添加可以被投放的行為。

在頁面pageLoad的時候（用戶端）發送ajax請求，將每個已經評分的人員的資訊產生xml返回
然後迴圈子節點。然後根據子節點的資訊添加到相應地區，添加相應的行為。

綜上總結幾點
1）jQuery操作元素比較方便
2）asp.net Ajax對javascript內建的對象的擴充使用比較方便
3）asp.net ajax架構getLocation計算元素位置方法有很大的局限性
4)對於實現拖放其實PreviewDragDrop.js內對IDragSource和IDropTarget介面提供了預設實現的類，和DragDropList等
合理繼承這些類，可以極大的減少用戶端寫大量代碼的量。建議大家好好研究PreviewDragDrop.js

 

主要是js操作，附拖放的js下載:http://files.cnblogs.com/jackhuclan/PersonDragDrop.rar