您好,欢迎访问一九零五行业门户网

学习YUI.Ext第五日--做拖放Darg&Drop_YUI.Ext相关

拖放某个元素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中。有空再说。
其它类似信息

推荐信息