拖放某个元素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中。有空再说。
【学习YUI.Ext第五日--做拖放Darg&Drop】相关文章：
★ Javascript生成全局唯一标识符（GUID,UUID）的方法
★ 常用DOM整理