学习YUI.Ext第五日--做拖放DargDrop

拖放某个元素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
}
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;
}
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);
}

//初始化
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;
}

for(idindraggable){
newDraggable(draggable[id]);
}

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

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

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

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