快捷導(dǎo)航

學(xué)習YUI.Ext第五日--做拖放Darg&Drop

更新時間：2007年03月10日 00:00:00 作者：

拖放某個元素Darg&Drop是windows（視窗）問世時的一個重要特征。現(xiàn)在我們要在瀏覽器里面實現(xiàn)，怎么做呢？先看看基本例子：

YAHOO.example.DDApp = function() {  
    var dd;  
    return {  
        init2: function() {  

//   var dropzone =["dz"];  
//   for(i in dropzone){  
//           new YAHOO.util.DDTarget(dropzone[i]);  
//    };  
   var  draggable =["dd_1","dd_2","dd_3"]; //數(shù)組存放DargDrop的ID  
    Draggable = function(id, sGroup) {  
    //建立DragDrop對象。這個必須由YAHOO.util.DragDrop的子類來調(diào)用  
    //Sets up the DragDrop object. Must be called in the constructor of any YAHOO.util.DragDrop subclass   
    this.init(id, sGroup);  
      }  
   Draggable.prototype = new YAHOO.util.DD(); //繼承父類  
   Draggable.prototype.startDrag = function(x, y) {  
          YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 0.5);  
      }  
   Draggable.prototype.endDrag = function(e) { //拖放后返回原點  
    var draggable = this.getEl();  
    YAHOO.util.Dom.setStyle(draggable, "opacity", 1.0);  
    draggable.style.left = "0px";  
    draggable.style.top  = "0px";  
   }  
   for(i in draggable){  
     new Draggable(draggable[i]);  
   }  

        }  
    }  
} (); 

注意的地方：

1.這里用了一個數(shù)組先收集好所有要DD（Darg&Drop，下同）的元素，再用for遍歷new new YAHOO.util.DD()對象，“捆綁”成一類具有相同屬性的對象：Draggable。

2.遇到一個無法入手的問題：
用YUI做Dragdrop，如果你的系統(tǒng)開clearType ，移動之后字體會發(fā)毛，估計ie內(nèi)部render的問題。本來打算用DDProxy代替，但一用DDProxy就無法繼承下去。

3.需手工加入xhtml的holder.

ok這個例子暫告一段落，看看一些好玩的(演示)：

復(fù)制代碼代碼如下:

var correct = { opt0:"ans1", opt1:"ans2", opt2:"ans0" }     // 正確答案  
var answer  = { opt0:"tmp0", opt1:"tmp1", opt2:"tmp2" }     // 解答  

// 採點  
function mark(event)  
{  
    var points = 0;     //    
    var max = 3;        //    

    for (key in correct) {  
        points += correct[key] == answer[key] ? 1: 0;  
    }  
    var score = Math.floor(points / max * 100);  
    var result = document.getElementById("result");  
    result.innerHTML = (score > 70 ? "合格": "不合格") + "：" + score + "%";  
}  

// 初始化  
function init(event)  
{  

    var dropzone = [ "ans0", "ans1", "ans2",            // 答案欄  
                     "tmp0", "tmp1", "tmp2" ];          // 臨時地方（開始放國旗的地方）  
    for (id in dropzone) {  
        new YAHOO.util.DDTarget(dropzone[id]);  
    }  

      
    var draggable = [ "opt0", "opt1", "opt2" ];         // 可選項（國旗）  

    Draggable = function(id, sGroup) {  
        this.init(id, sGroup);  
    }  

    Draggable.prototype = new YAHOO.util.DD();  

    Draggable.prototype.canAccept = function(draggable, dropzone) {  
        if (dropzone.id.match(/^opt[012]$/)) {  
            return false;             
        }  
        for (key in answer) {  
            if (answer[key] == dropzone.id) {  
                return false;       
            }  
        }  
        return true;  
    }  

    Draggable.prototype.startDrag = function(x, y) {  
        YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 0.5);  
    }  

    Draggable.prototype.onDragEnter = function(e, id) {  
        var dropzone = YAHOO.util.DDM.getElement(id);  
        var draggable = this.getEl();  
        if (this.canAccept(draggable, dropzone)) {  
            dropzone.style.backgroundColor = "orange";  
        }  
    }  

    Draggable.prototype.onDragOut = function(e, id) {  
        var dropzone = YAHOO.util.DDM.getElement(id);  
        dropzone.style.backgroundColor = "white";  
    }  

    Draggable.prototype.onDragDrop = function(e, id) {  
        var dropzone = YAHOO.util.DDM.getElement(id);  
        var draggable = this.getEl();  
        if (this.canAccept(draggable, dropzone)) {  
            dropzone.style.backgroundColor = "white";  
            dropzone.appendChild(draggable);  
            answer[draggable.id] = dropzone.id;         // 解答更新  
        }  
    }  

    Draggable.prototype.endDrag = function(e) {  
        var draggable = this.getEl();  
        YAHOO.util.Dom.setStyle(draggable, "opacity", 1.0);  
        draggable.style.left = "0px";  
        draggable.style.top  = "0px";  
    }  

    for (id in draggable) {  
        new Draggable(draggable[id]);  
    }  

    // 綁定按鈕觸發(fā)事件，計算成績  
    YAHOO.util.Event.addListener("submit", "click", mark);  
}  

YAHOO.util.Event.addListener(window, "load", init); 