首页 / 脚本样式 / JavaScript / 学习YUI.Ext第五日--做拖放Darg&Drop

拖放某个元素Darg&Drop是windows（视窗）问世时的一个重要特征。现在我们要在浏览器里面实现，怎么做呢？先看看基本例子：

复制代码 代码如下:
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"]; //数组存放DargDrop的ID 
    Draggable = function（id, sGroup） { 
    //建立DragDrop对象。这个必须由YAHOO.util.DragDrop的子类来调用 
    //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.这里用了一个数组先收集好所有要DD（Darg&Drop，下同）的元素，再用for遍历new new YAHOO.util.DD（）对象，“捆绑”成一类具有相同属性的对象：Draggable。

2.遇到一个无法入手的问题：
用YUI做Dragdrop，如果你的系统开clearType ，移动之后字体会发毛，估计ie内部render的问题 。本来打算用DDProxy代替，但一用DDProxy就无法继承下去。  

3.需手工加入xhtml的holder.  


ok这个例子暂告一段落，看看一些好玩的（演示）： 


复制代码 代码如下:
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]）; 
    } 

    // 绑定按钮触发事件，计算成绩 
    YAHOO.util.Event.addListener（"submit", "click", mark）; 
} 

YAHOO.util.Event.addListener（window, "load", init）; 

       如果再把xhtml贴出来，很长 很烦 。look look DEMO.

好，今天到这儿，严重ot中。有空再说。