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

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

拖放某个元素Darg&Drop是windows（视窗）问世时的一个重要特征。现在我们要在浏览器里面实现，怎么做呢？先看看基本例子： 复制代码 代码如下:YAHOO.example.DDApp=function(){ vardd; return{ init2:function(){ //vardropzone=["dz"]; //for(iindropzone){ //newYAHOO.util.DDTarget(dropzone[i]); //}; vardraggable=["dd_1","dd_2","dd_3"];//数组存放DargDrop的ID Draggable=function(id,sGroup){ //建立DragDrop对象。这个必须由YAHOO.util.DragDrop的子类来调用 //SetsuptheDragDropobject.MustbecalledintheconstructorofanyYAHOO.util.DragDropsubclass this.init(id,sGroup); } Draggable.prototype=newYAHOO.util.DD();//继承父类 Draggable.prototype.startDrag=function(x,y){ YAHOO.util.Dom.setStyle(this.getEl(),"opacity",0.5); } Draggable.prototype.endDrag=function(e){//拖放后返回原点 vardraggable=this.getEl(); YAHOO.util.Dom.setStyle(draggable,"opacity",1.0); draggable.style.left="0px"; draggable.style.top="0px"; } for(iindraggable){ newDraggable(draggable[i]); } } } }();注意的地方： 1.这里用了一个数组先收集好所有要DD（Darg&Drop，下同）的元素，再用for遍历newnewYAHOO.util.DD()对象，“捆绑”成一类具有相同属性的对象：Draggable。 2.遇到一个无法入手的问题： 用YUI做Dragdrop，如果你的系统开clearType，移动之后字体会发毛，估计ie内部render的问题。本来打算用DDProxy代替，但一用DDProxy就无法继承下去。 3.需手工加入xhtml的holder. ok这个例子暂告一段落，看看一些好玩的(演示)：复制代码 代码如下:varcorrect={opt0:"ans1",opt1:"ans2",opt2:"ans0"}//正确答案 varanswer={opt0:"tmp0",opt1:"tmp1",opt2:"tmp2"}//解答 //採点 functionmark(event) { varpoints=0;// varmax=3;// for(keyincorrect){ points+=correct[key]==answer[key]?1:0; } varscore=Math.floor(points/max*100); varresult=document.getElementById("result"); result.innerHTML=(score>70?"合格":"不合格")+"："+score+"%"; } //初始化 functioninit(event) { vardropzone=["ans0","ans1","ans2",//答案栏 "tmp0","tmp1","tmp2"];//临时地方（开始放国旗的地方） for(idindropzone){ newYAHOO.util.DDTarget(dropzone[id]); } vardraggable=["opt0","opt1","opt2"];//可选项（国旗） Draggable=function(id,sGroup){ this.init(id,sGroup); } Draggable.prototype=newYAHOO.util.DD(); Draggable.prototype.canAccept=function(draggable,dropzone){ if(dropzone.id.match(/^opt[012]$/)){ returnfalse; } for(keyinanswer){ if(answer[key]==dropzone.id){ returnfalse; } } returntrue; } Draggable.prototype.startDrag=function(x,y){ YAHOO.util.Dom.setStyle(this.getEl(),"opacity",0.5); } Draggable.prototype.onDragEnter=function(e,id){ vardropzone=YAHOO.util.DDM.getElement(id); vardraggable=this.getEl(); if(this.canAccept(draggable,dropzone)){ dropzone.style.backgroundColor="orange"; } } Draggable.prototype.onDragOut=function(e,id){ vardropzone=YAHOO.util.DDM.getElement(id); dropzone.style.backgroundColor="white"; } Draggable.prototype.onDragDrop=function(e,id){ vardropzone=YAHOO.util.DDM.getElement(id); vardraggable=this.getEl(); if(this.canAccept(draggable,dropzone)){ dropzone.style.backgroundColor="white"; dropzone.appendChild(draggable); answer[draggable.id]=dropzone.id;//解答更新 } } Draggable.prototype.endDrag=function(e){ vardraggable=this.getEl(); YAHOO.util.Dom.setStyle(draggable,"opacity",1.0); draggable.style.left="0px"; draggable.style.top="0px"; } for(idindraggable){ newDraggable(draggable[id]); } //绑定按钮触发事件，计算成绩 YAHOO.util.Event.addListener("submit","click",mark); } YAHOO.util.Event.addListener(window,"load",init);如果再把xhtml贴出来，很长很烦。looklookDEMO. 好，今天到这儿，严重ot中。有空再说。