当前位置：首页 > 资讯 > 技术文档

学习YUI.Ext第五日--做拖放Darg&Drop

时间：2022-08-21 23:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：学习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这个例子暂告一段落，看看一些好玩的(演示)：

[u]复制代码[/u] 代码如下:

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中。有空再说。

全部评论(0)

上一篇：php运行出现Call to undefined function curl_init()的解决方法
下一篇：Ext面向对象开发实践（续）

资讯排行榜
更多>>

学习YUI.Ext第五日--做拖放Darg&amp;Drop

学习YUI.Ext第五日--做拖放Darg&Drop