学习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 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
koa源码中promise的解读
Nov 13 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
学习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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
jQuery分组选择器用法实例
2014/12/23 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python实现E-Mail收集插件实例教程
2019/02/06 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Django 批量插入数据的实现方法
2020/01/12 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python中添加模块导入路径的方法
2021/02/03 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
大学生学习自我评价
2014/01/13 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
岗位安全生产责任书
2014/07/28 职场文书
乐山大佛导游词
2015/02/02 职场文书
运动会主持人开幕词
2016/03/04 职场文书
创业计划书之熟食店
2019/10/16 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
nginx容器方式反向代理实战
2022/04/18 Servers