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


Posted in Javascript onMarch 10, 2007

拖放某个元素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" }     // 解答  // ?竦?nbsp; 
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中。有空再说。

Javascript 相关文章推荐
jQuery load方法用法集锦
Dec 06 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 #Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
学习YUI.Ext基础第一天
Mar 10 #Javascript
JavaScript触发器详解
Mar 10 #Javascript
又一个图片自动缩小的JS代码
Mar 10 #Javascript
基础的prototype.js常用函数及其用法
Mar 10 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python3 集合set入门基础
2020/02/10 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
五一服装活动方案
2014/01/11 职场文书
工作表现评语
2014/01/19 职场文书
工作会议主持词
2014/03/17 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
MySQL注入基础练习
2021/05/30 MySQL
html实现弹窗的实例
2021/06/09 HTML / CSS
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js