学习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中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
ECMAScript6--解构
2017/03/30 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
python文件的md5加密方法
2016/04/06 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
OpenCV实现人脸识别
2017/04/07 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python实现飞机大战小游戏
2019/11/08 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
建筑专业毕业生推荐信
2013/11/21 职场文书
初中学习计划书范文
2014/09/15 职场文书
Python列表的索引与切片
2022/04/07 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python